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 に答える