Question

我有一个图像数组，因此用户可以单击箭头来更改图像，但只访问数组索引的前三个图像而不是休息。这是我的代码片段。

 <html>
 <body>
<div id="debug"></div>
<div id="rightDisplay">
<div id="imgread"></div>
<img id="currentImg" alt="RoboustImage" src="http://i.imgur.com/dCS4tQk.jpg" title="click to view full scape" height="50%" width="50%" style="margin-left:20%;" />
<img id="changeImg" alt="clickandchange" src="1461670638_hand-right.png" onclick="changeImage()"></div>

</table>


<script>
var theSource;
var array;
var curImage;

function showImage(imgName) {
    var curImage = document.getElementById('currentImg');
    var thePath = 'http://i.imgur.com/';
    var theSource = thePath + imgName;
    curImage.src = theSource;
    // curImage.alt = imgName;

    // curImage.title = imgName;
}

function changeImage(dir) {
    var img = document.getElementById('currentImg');

    var imgs = ["http://i.imgur.com/dCS4tQk.jpg", "http://i.imgur.com/JKNnuSE.jpg", "http://i.imgur.com/9wHVhck.jpg", "http://i.imgur.com/dCS4tQk.jpg", "http://i.imgur.com/ZqoEU9o.jpg", "http://i.imgur.com/SpBfUZi.jpg", "http://i.imgur.com/JKNnuSE.jpg", "http://i.imgur.com/YwAmPYu.jpg", "http://i.imgur.com/T7NBjJm.jpg", "http://i.imgur.com/ujJ3g1k.jpg"];
    img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
    // var debug = document.getElementById('imgread').innerHTML=img.src;

}

</script>

Answer 1

您当前的代码不支持imgs网址中的重复图片。 Array.indexOf返回元素出现的第一个索引。由于索引3处的网址也会出现在索引0，因此它永远不会再得到。

我会在javascript变量中跟踪索引以避免此问题。这是一个例子：

var getNextImageUrl = (function() {

  var currentIndex = 0;
  var imgs = ["a", "b", "c"];

  return function(direction) {

    var dir = direction || 1; // Default direction is forward

    var newIndex = currentIndex + dir;

    // Loop when end is reached
    if (newIndex >= imgs.length) {
      newIndex = 0;
    } else if (newIndex < 0) {
      newIndex = imgs.length - 1;
    }

    currentIndex = newIndex;

    return imgs[currentIndex];

  };

}())

JS函数不访问所有数组图像

1 个答案: