0

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

这就是我所拥有的，但我似乎迷失了试图重新开始它。

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();

谢谢您的帮助！

4

1 回答 1

0

变量计数器=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);
        });
    });
于 2013-10-02T17:42:09.707 回答