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并更改＆＃34; VCRImage＆＃34;在第二个名字，但没有运气。

Answer 1

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

查看您的代码我做了一些修改，以便为您运行。起初他们可能看起来有点激烈，但如果你花时间去理解它们，你会发现它们的好处。

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

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

<强> 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

Answer 2

你可以使用＆＃39; img.length＆＃39;确定数组的大小。因此，您不必使用NumberOfImages变量。

像这样：

var img = new Array()

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 == img.length)
    imgNumber = 0
document.images["VCRImage"].src = img[imgNumber]
}

如何在点击时循环显示图像？

2 个答案: