javascript - 如何通过点击循环浏览图像？

Question

我试图让一个图像在单击时循环显示其他图像(并循环)(不涉及计时)。我使用以下代码将其用于一张图像:

<script>
    var NumberOfImages = 2

    var img = new Array(NumberOfImages)

    img[0] = "http://2.bp.blogspot.com/-DNISePZjJ4g/U9bSB5NjEzI/AAAAAAAARCw/K7OGOPjQd0Q/s1600/2.png"
    img[1] = "http://4.bp.blogspot.com/-MoL1MHN12Eo/U9bSB6EIS-I/AAAAAAAARCs/gUSKbzsg05g/s1600/3.png"

    var imgNumber = 0

    function NextImage()
    {
        imgNumber++
        if (imgNumber == NumberOfImages)
            imgNumber = 0
        document.images["VCRImage"].src = img[imgNumber]
    }
</script>

<A HREF="javascript:NextImage()">
<IMG SRC="http://2.bp.blogspot.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png" name="VCRImage" BORDER=0></A>

我的问题是我不确定如何放置第二张图像并让它循环显示不同的图像。我尝试过复制 JavaScript 和 HTML，并将第二个上的“VCRImage”更改为另一个名称，但没有成功。

Answer 1

我希望您觉得这个答案有帮助，并考虑接受它。

查看您的代码，我做了一些修改来让它为您运行。一开始它们可能看起来有点激进，但如果您花时间理解它们，您就会看到好处。

• 首先我删除了 anchor 元素。您使用它们来简单地连接点击事件。更优选的方法是在 JavaScript 中查询元素，并将事件监听器绑定(bind)到每个元素。通过删除 anchor ，当用户将鼠标悬停在图像上时，我也会丢失指针，为了解决这个问题，我添加了一个具有相同效果的 CSS 类。
• 接下来，我将每个图像元素放置在闭包函数中，以便每个图像都可以访问自己的计数器变量。当引发单击事件时，在匿名函数范围之外的计数器变量可以访问捕获的计数器元素。允许它自由更新。

我对可能存在混淆的代码进行了注释。如果您有任何疑问，请发表评论。

HTML:

<IMG SRC="http://2.bp.blogspot.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png" name="VCRImage" BORDER=0>

<IMG SRC="http://2.bp.blogspot.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png" name="VCRImage" BORDER=0>

CSS:

img[name=VCRImage]:hover
{
  cursor:pointer;
}

JavaScript:

    //Declare an image array same as calling new Array();
    var img = []
    img[0] = "http://2.bp.blogspot.com/-DNISePZjJ4g/U9bSB5NjEzI/AAAAAAAARCw/K7OGOPjQd0Q/s1600/2.png";
    img[1] = "http://4.bp.blogspot.com/-MoL1MHN12Eo/U9bSB6EIS-I/AAAAAAAARCs/gUSKbzsg05g/s1600/3.png";

    //Select all elements on the page with the name attribute equal to VCRImage
    var images = document.querySelectorAll('[name=VCRImage]');

    //For each image bind the click event
    for(var i=0; i < images.length; i++)
    {
      var image = images[i];
      //https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
      image.addEventListener('click', imageClicked(), false);
    }

    function imageClicked()
    {
      //Use a closure to wrap the counter variable
      //so each image element has their own unique counter
      var counter = 0;
      return function(event)
      {
        //Increment counter
        counter++;
        //The context of "this" is the image element
        //Use a modulus
        this.src = img[counter % img.length];
      }
    }

在这里查看它的实际效果: http://jsbin.com/veqakame/1/edit

更新:为了使图像发挥其自己的备用图像集的作用，我在元素上创建了一个 data-altimage 属性。此属性的值设置为单击时图像将使用的逗号分隔的图像源集。

http://jsbin.com/qiridote/1/edit