Question

我正在创建一个水平的缩略图字符串，可以在页面底部滚动。这些可以单击并交换为主图像。它完全按照我想要的方式工作，除了我希望列表是无限的 - 当数组中的最后一个图像出现时它会回到第一个并再次遍历数组，所以如果有人要观看足够长的时间，他们会看到相同的图像滚动。

这就是我的作品，但我似乎迷失了，试图重新开始。

var bookImage = [];
bookImage[0] = "images/book1/IsseyFinal.jpg";
bookImage[1] = "images/book1/35web.jpg";
bookImage[2] = "images/book1/36web.jpg";
bookImage[3] = "images/book1/Oil.jpg";
bookImage[4] = "images/book1/3a.jpg";
bookImage[5] = "images/book1/LegsFinalCrop.jpg";
bookImage[6] = "images/book1/8a.jpg";

function swapEm() {
    var lines = "";
    $.each(bookImage, function (i, item) {
        lines += "<img class=\"thumb\" src='" + item + "' height=\"90\"> ";
    });
    $("#grid_thumb").html(lines);
    $('.thumbs img').click(function () {
        var thmb = this;
        var src = this.src;
        $('.main img').fadeOut(400, function () {
            this.src = thmb.src;
            $(this).fadeIn(400)[0].src = src;
        });
    });
};
swapEm();

这是我滚动它们的地方..

var thumbScroll;
var i = 1;                     

function myLoop () {           
  thumbScroll=setTimeout(function () {    
      con_left=(i*-.5);    
  $("#grid_thumb").css({"left": con_left}); 
      i++;                     
      if (i < 1000) {            
      myLoop();             
      }                       
  }, 20)
}
myLoop();

感谢您的帮助！

Answer 1

var counter = 0;

$('.thumbs img').click(function () {
        var thmb = this;
        var src = this.src;
        $('.main img').fadeOut(400, function () {
        if(bookImage.length == counter)
        {
          counter=0;
         }
            this.src =bookImage[++counter];
            $(this).fadeIn(400);
        });
    });

循环数组几次

1 个答案: