0

一个很简单的问题，但它整个星期都在困扰着我！

首先，我不希望有人给我写这么大的代码，然后我把它拿走并为我自己的。希望有人真正帮我写这个:)

我正在尝试在我的网站上将播放列表显示为 png 图像。我有 2 个必须显示的播放列表。播放列表将在图像印刷机上改变。

我有 4 个按钮图像，“CD1up”、“CD1down”、“CD2up”和“CD2down”。

我想让这些按钮改变当前显示的播放列表，但也显示按钮的正确状态。例如，播放列表 1 是否正在显示，则必须显示“CD1up”，并显示“CD2down”。

我会在这里发布我当前的代码，但我基本上放弃了它并决定从头开始，因为我对 web javascript 很糟糕。

非常感谢所有帮助！

我基本上可以流利地使用 HTML 和 CSS，但在 web javascript 方面却很糟糕。

4

1 回答 1

4

一些注意事项：

  • 如果为每个图像赋予一个id属性，则可以document.getElementById在页面加载后使用它来获取对该元素的引用。

  • 然后，您可以src将该元素上的属性设置为新 URL 以更改图像。

  • 确保您的script标签位于 HTML 中的元素之后（就在结束</body>工作之前），以便元素在您需要时存在。

  • 您可以将click事件处理程序添加到页面上的任何元素。大多数浏览器都支持addEventListener，但一些旧版本的 IE 仍然需要您使用attachEvent来连接处理程序。因此，您会看到具有如下功能的人：

    function hookEvent(element, eventName, handler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, handler, false);
    }
    else if (element.attachEvent) {
        element.attachEvent("on" + eventName, handler);
    }
    else {
        element["on" + eventName] = function(event) {
            return handler.call(this, event || window.event);
        };
    }
}

例如，如果你有这个img：

<img id="myImage" src="/path/to/img.png">

这会在点击时循环显示四个图像：

<!-- This must be AFTER the `img` above in the HTML,
     just before your closing /body tag is good -->
<script>
(function() {
    var myImage = document.getElementById("myImage"),
        images = [
            "/path/to/img1.png",
            "/path/to/img2.png",
            "/path/to/img3.png",
            "/path/to/img4.png"
        ],
        index = -1;

    hookEvent(myImage, "click", imageClick);

    function imageClick() {
        ++index;
        if (index >= images.length) {
            index = 0;
        }
        myImage.src = images[index];
    }
})();
</script>

您可以使用像jQuery、YUI、Closure或其他任何一个像样的库来获得许多实用程序功能并消除浏览器差异，尽管如果您只想在页面上做的只是有时更改图像并处理单击或二，这可能是矫枉过正。

于 2012-12-14T05:58:38.823 回答