迷你幻燈片碼適配

Question

我有這樣的HTML標記：

<div id="leftBtn">Left</div> 
<div id="rightBtn">Right</div> 

<div id="wrapper"> 
    <div id="slideshowContainer"> 
     <div id="slide_1" class="slide"></div> 
     <div id="slide_2" class="slide"></div> 
     <div id="slide_3" class="slide"></div> 
     <div id="slide_4" class="slide"></div> 
    </div> 
</div> 

...它相當於一個超級簡單的幻燈片（所有學分jimjimmy1995的代碼）。現在它向左/向右滑動。當點擊右/左按鈕我需要幻燈片重疊/分離和動畫不透明，而不是水平滑動。這是我得到的 - Fiddle。我不是一個jQuery精明的人，所以我需要幫助改變代碼 - 隨時改變它。 謝謝。

佩德羅

Answer 1

代替編碼自己的滑塊，你可以採取快速瀏覽一下nivo-slider，它有很酷的過渡的反彈從一開始就includede，而且執行是相當簡單的。

祝你好運:)

Answer 2

東西快速&髒由於時間:)不知道如果我理解您的需求顯然不足。利用jquery .animate API來放置一些動畫。

注意：您需要檢查第一個&最後一個項目，以瀏覽幻燈片。

http://jsfiddle.net/ZkyZx/7/

變化是幻燈片功能：

function slideShow_animate(){ 
    $('.slide.active').removeClass('active').stop().animate({ 
     opacity : 0 
    }, 500, function() { 
     $(this).next('.slide').addClass('active').stop().animate({ 
      opacity : 1 
     }, 500); 
    }); 
}