jQuery：5秒ごとに自動的にリスト内の次の画像をクリックしますか？

Question

私がサムネイルとして提示される画像の特定のリストを、持っている：ユーザーが画像をクリックすると

<ul id="thumbs"> 
    <li class="small-img"><img src="images/feature1.png" /></li> 
    <li class="small-img"><img src="images/feature2.png" /></li> 
    <li class="small-img"><img src="images/feature3.png" /></li> 
</ul> 

ように私はjQueryのを使用するには、それは（私がfrom another StackOverflow Askだ）divの中で注目の画像を置き換えます。

$('#thumbs img').click(function(){ 
    $('div.feature-photo img').hide().attr('src',$(this).attr('src')).fadeIn(); 
}); 

私の質問は：スライドショーにする方法はありますか？ 5秒ごとに次の画像を自動的に「クリック」しますか？この中にsetIntervalはありますか？私は本当にそれについて基本的なことをしようとしているし、より多くのプラグインを使用しないようにしています。 （しかし、それ以外の方法がない場合は、私はそれを検討します。）

助けていただければ幸いです。

Answer 1

あなたは

​​

を使用することができますしかし、あなたは、ユーザーがページをリロードする場合は、タイムアウトがゼロから始まることに注意してkeeepする必要があります！

Answer 2

たsetIntervalは、ユーザーがそれはあなたのコードをトリガ何、あなたのコードは何をすべきかという観点で考える必要はないあなたの質問

var currImg = 0; 
var $images; 
$(document).ready(function() { 
    $images = $('#thumbs img'); 
    changeImg(); 
    window.setInterval(function() { 
     currImg++; 
     if(currImg == $images.length) currImg = 0; 
     changeImg(); 
    }, 5000); 
}); 

function changeImg() { 
    $('div.feature-photo img').hide().attr('src',$images.eq(currImg).attr('src')).fadeIn(); 
} 

Answer 3

への答えかもしれません。したがって、「自動的に」 ''をクリックするのではなく、コードが自動的に次の画像を表示するようにします。

だから、最初のステップは、clickハンドラのうち、あなたのコードを移動することです：

function showImage(img){ 
    $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn(); 
} 

$('#thumbs img').click(function() { 
    showImage(this); 
}); 

そして質問は次のようになります。どのように私は、「次」の画像を5秒ごとshowImageを呼んでください。さて、まず、 "現在"のイメージが何であるかを覚えておきましょう。それを行うために私たちのshowImageを変更するのに十分な簡単：

var current = null; 
function showImage(img){ 
    current = img; 
    $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn(); 
} 

は、それでは我々だけトリガが5秒以内に発生する必要があります。あなたはです。を使用するとsetIntervalですが、実際には制御不能になるのは簡単だから、代わりにsetTimeoutの連鎖シリーズを使用します。そして、それは何のための良いトリガーだろうか？ユーザーがshowImageにおそらく右が画像をクリックすると、その5秒後まあ、：

var current = null; 
var timer = 0; 
function showImage(img){ 
    current = img; 
    $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn(); 
    if (timer) { 
     clearTimeout(timer); 
    } 
    timer = setTimeout(nextImage, 5000); 
} 

わかりましたので、何がnextImageのようになりますか？

function nextImage() { 
    var $current; 

    if (timer) { 
     clearTimeout(timer); 
     timer = 0; 
    } 
    if (current) { 
     $current = $(current); 
     next = $current.nextAll("img")[0]; 
     if (!next) { 
      $current.siblings("img")[0]; 
     } 
     if (next) { 
      showImage(next); 
     } 
    } 
} 

あなたが最初の画像を示すことによって最初に物事をキックオフがあります：私たちは、おそらく、おそらく、currentを使用したいと言うだろう

showImage($("#thumbs img")[0]); 

だから、一緒にそのすべてもたらす、と確認し

(function() { 
    var current = null; 
    var timer = 0; 

    function showImage(img){ 
     current = img; 
     $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn(); 
     if (timer) { 
      clearTimeout(timer); 
     } 
     timer = setTimeout(nextImage, 5000); 
    } 

    function nextImage() { 
     var $current; 

     if (timer) { 
      clearTimeout(timer); 
      timer = 0; 
     } 
     if (current) { 
      $current = $(current); 
      next = $current.nextAll("img")[0]; 
      if (!next) { 
       $current.siblings("img")[0]; 
      } 
      if (next) { 
       showImage(next); 
      } 
     } 
    } 

    $('#thumbs img').click(function() { 
     showImage(this); 
    }); 
    showImage($("#thumbs img")[0]); 

})(); 

（またはその代わりにバニラスコープ機能の、あなたはjQueryのreadyを使用する場合があります：私たちは、私たちは、グローバルシンボルを作成していないスコープ機能でそれをラップします。）

上記はかなり粗く、完全にテストされていませんが、あなたはそのアイディアを得ています。

Answer 4

スイッチ機能内で次の画像を簡単に計算できます。 あなたが台無しにあなたのvarのスペースをしません。この方法で;）

(function switchToImage(img) { 
    $(img).click() 
    var images = $('#thumbs img'); 
    var nextIndex = ($.inArray(images, img) + 1) % images.length; 
    setTimeout(function() { 
    switchToImage(images[nextIndex]) 
    }, 5000); 
})($('#thumbs img')[0]); 

Answer 5

あなたが好きな場合は、プレーンなjQueryの道を行くことができます。 ここに私の試みは

var intervalId; 
$(function(){ 


function cycleImage(){ 

    var onLastLi = $("#thumbs li:last").hasClass("current");  
    var currentImage = $("#thumbs li.current img"); 
    var targetImage = $('div.feature-photo img');    
    $(targetImage).hide().attr('src', $(currentImage).attr('src')).fadeIn(); 

    var currentLi = $("#thumbs li.current"); 
    currentLi.removeClass("current"); 

    if(onLastLi){ 
     $("#thumbs li:first").addClass("current"); 
    }else{   
     currentLi.next().addClass("current"); 
    } 

}; 

intervalID = setInterval(cycleImage, 5000); 



}) 

だとあなたは私が関数の最初の（即時）実行してどうなるか...かなりよく分からない行動here