如何在「最簡單的jQuery幻燈片」上添加導航箭頭？

我從snook.ca（http://snook.ca/archives/javascript/simplest-jquery-slideshow）使用「最簡單的jQuery幻燈片」，我喜歡它。我在這裏引用的代碼：如何在「最簡單的jQuery幻燈片」上添加導航箭頭？

的JavaScript

$(function(){ 
    $('.fadein img:gt(0)').hide(); 
    setInterval(function(){ 
    $('.fadein :first-child').fadeOut() 
    .next('img').fadeIn() 
    .end().appendTo('.fadein');}, 
    3000); 
});

CSS

.fadein { position:relative; width:500px; height:332px; } 
.fadein img { position:absolute; left:0; top:0; }

HTML

<div class="fadein"> 
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> 
</div>

我想點擊添加到箭頭以手動轉到下一個和最後一個圖像。由於我還沒有找到任何解決方案，我不知道jquery我在這裏問這個問題...

真的很感謝大家！

來源

2013-10-04 Rucc

$(function(){ 
    $('.fadein img:gt(0)').hide(); 
    $('.nextButton').on('click', function(){ 
     $('.fadein :first-child').fadeOut() 
      .next('img').fadeIn() 
      .end().appendTo('.fadein'); 
    }); 
    $('.previousButton').on('click', function() { 
     $('.fadein :last-child').fadeIn() 
      .insertBefore($('.fadein :first-child').fadeOut()); 
    }); 
});

這是不同的倒退，因爲其他腳本走的是appendTo優勢和當前img處於指數爲0。你必須提供的按鈕，但它是非常簡單的。你可以試試this jsFiddle。

來源

2013-10-05 00:02:53 ShadowCat7

Hi @ ShadowCat7，非常感謝您的幫助！你所說的完美。我想在箭頭上顯示鏈接光標，並且我需要使用來完成，如果不是這樣，它不起作用。非常感謝！ – Rucc

您可以在css中使用 '.nextButton，.previousButton {cursor：pointer}' – ShadowCat7

好得多。再次，謝謝！ :) – Rucc

如何在「最簡單的jQuery幻燈片」上添加導航箭頭？

回答

相關問題