jquery迭代列表圖像與定時器和懸停

我有一個列表，李有img的。這些圖像是縮略圖，還有另一個div，大版本的拇指應該被迭代。另外，當用戶在縮略圖上晃動時，大圖像迭代應停止並顯示懸停的內容。jquery迭代列表圖像與定時器和懸停

我懸停的東西正在工作，但迭代&時間不是。我錯過了一些東西，並不感到驚訝，因爲這實際上是在推動我的noob靜態頁面功能的極限！

簡單的HTML：

<ul> 
<li><img src='blah' />text</li> 
<li><img src='blah' />text</li> 
</ul> 
<div ='big'></div>

的jQuery：

$(document).ready(function(){ 

    $('li img').each(function (i) { 
     var thumb = $(this).attr("src"); 
     setTimeout(function() { 
      $('#big').html('<img src=' + thumb + '/>'); 

      }, 5000 * (i + 1)); 
    }); 

    imgHov(); 

}); 

function imgHov(){ 
    $('li img').hover(
     function(){ 
      $('#big').html('<img src=' + $(this).attr("src") + '/>'); 
     }, 
     function(){ 
      $('#big').html(""); 
     } 
     ); 

};

我爲徹底重建這件事情;我試過使用jQuery .map（）和其他方式將列表轉換爲數組而不是.each。讓我知道你的專家將採取的方向。謝謝！

來源

2012-10-20 twinturbotom

我做了這個給你，看看...

現場演示：

http://jsfiddle.net/oscarj24/XcZBq/

只知道，而不是使用setTimeout，我用setInterval，只是把一些這是邏輯，就是這樣。

希望這會有所幫助。

來源

2012-10-20 05:56:48

你是男人！當然你有一隻小熊！我沒有你的實現工作在我的最後，但是jsfiddle就是這樣。我需要更多地瞭解你接觸到的新東西，並深入瞭解我所見過的東西的用法，但還沒有完全掌握。我很欣賞這一點。巨大的幫助。好的圖像。唯一真正的修改是懸停事件不會暫停動畫;如果你保持徘徊，動畫將繼續。 – twinturbotom

:-)謝謝！好吧，只是要知道，如果你想停止動畫有一個方法來消除間隔或超時，我不記得確切，只是搜索「刪除間隔或設置超時在JavaScript」，然後當你得到的方法刪除它可以在懸停事件中調用它，然後在離開懸停時再次放置「setInterval」以繼續動畫。也許你可以把所有這些放在兩個叫做「start（）」和「stop（）」的方法中，以免重複代碼並以更好的方式處理它。 –

我會研究一下。再次感謝。仍在學習地圖的使用並試圖在我的本地網站上實施。 – twinturbotom

jquery迭代列表圖像與定時器和懸停

回答

相關問題