Javascript 如何在单击时循环浏览图像？

我试图让一个图像在单击时循环浏览其他图像（并循环）（不涉及计时）。我用以下代码处理一幅图像：

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

var NumberOfImages=2
var img=新数组（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
函数NextImage（）
{
imgNumber++
if（imgNumber==NumberOfImages）
imgNumber=0
document.images[“VCRImage”].src=img[imgNumber]
}

---

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

您可以使用“img.length”来确定数组的大小。 因此，您不必使用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]
}

---

希望你能找到这个答案，并考虑接受它。

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

• 首先，我移除了锚元素。您使用这些来简单地连接单击事件。更可取的方法是查询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>

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

    //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];
      }
    }

JavaScript:

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

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

    //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];
      }
    }

//声明与调用新数组（）相同的图像数组；
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";
//选择页面上名称属性等于VCRImage的所有元素
var images=document.querySelectorAll（“[name=VCRImage]”）；
//为每个图像绑定单击事件
对于（var i=0；i

请在此处查看它的实际操作：

更新： 为了使这些图像脱离它们自己的备用图像集，我在元素上创建了一个数据altimage属性。此属性的值设置为单击时图像将使用的以逗号分隔的图像源集

---

您必须原谅我缺乏编码知识。我通过将“cursor:pointer”作为样式元素来保存CSS。但是，我在将JavaScript放入HTML字段时遇到了问题。我把它放在标签里，但出于某种原因它停止了工作。我确实解决了我原来的问题，但我仍然想知道如何在一个页面上使用这些脚本中的多个，就像我原来的问题一样。一旦解决了这个问题，我很乐意接受你的回答。你说的“多个脚本”是什么意思？本质上，我只想拥有不同的图像（如HTML中的图像），以便能够在一个页面上对不同的图像集执行此循环功能。我已经试过四次使用同一个脚本，并简单地替换掉VCRImage，但它们似乎都是从上一个脚本中提取的，不管名称如何。Epic。这是否可以与此处所示的向左滑动功能一起使用：移动到下一个图像。。。