簡單的循環幻燈片與下一個/ prev鏈接

我或多或少是一個初學者jquery並開始它我試圖做一個可點擊的，循環幻燈片，基於this之一。目前爲止這麼好。代碼有效（見下文）。我的問題：簡單的循環幻燈片與下一個/ prev鏈接

是不是有一種更簡單的方法來編寫代碼。我有點爲prev和next重複相同的代碼。
當我點擊下/上一個環節和動畫開始 - 和動畫過程中我再次點擊，則有時圖像閃爍或有錯誤。有沒有辦法強制動畫完成，然後纔對我的點擊作出反應。

的Javascript：

$(function() { 

    $('#prev').click(function() { 
     var $active = $('#slideshow IMG.active'); 
     var $prev = $active.prev(); 
     $active.addClass('last-active'); 

    if($active.is(":first-child")){$prev = $("IMG:last-child");} 
     $prev.css({opacity: 0.0}) 
      .addClass('active') 
      .animate({opacity: 1.0}, 1000, function() { 
       $active.removeClass('active last-active'); 
      }); 

    }); 


    $('#next').click(function() { 
     var $active = $('#slideshow IMG.active'); 
     var $next = $active.next(); 
     $active.addClass('last-active'); 

    if($active.is(":last-child")){$next = $("IMG:first-child");} 
     $next.css({opacity: 0.0}) 
      .addClass('active') 
      .animate({opacity: 1.0}, 1000, function() { 
       $active.removeClass('active last-active'); 
      }); 

    }); 

    });

CSS：

#slideshow {position:relative; height:350px; opacity:1.0;} 
    #slideshow IMG {position:absolute; top:0; left:0; z-index:8; opacity:0.0;} 
    #slideshow IMG.active {z-index:10; opacity:1.0;} 
    #slideshow IMG.last-active {z-index:9;} 
    #next {color:#0000ff; cursor:pointer;} 
    #prev {color:#0000ff; cursor:pointer;}

HTML：

<div id="slideshow"> 
     <img src="image1.jpg" class="active" /> 
     <img src="image2.jpg" /> 
     <img src="image3.jpg" /> 
     <img src="image4.jpg" /> 
    </div> 
    <div id="next">NEXT</div> 
    <div id="prev">PREV</div>

來源

2012-04-21 Michael

http://jsfiddle.net/kPD4n/

你去那裏。

1）添加同一類「NEXT」和「PREV」的按鈕，然後檢查該被點擊。
2）添加.stop（0,1）跳轉到動畫結束。

雖然還是有點小車...

來源

2012-04-21 14:48:15 Cristy

非常酷，謝謝！ - 我想console.log只是在那裏測試，對吧？ - 我不明白究竟是什麼（0,1）在停止（）表示，即使我讀http://api.jquery.com/stop/ – Michael 2012-04-23 08:22:47

首先0意味着動畫隊列不會被清除，所以如果你觸發10次動畫，動畫將執行10次（全長）。因此，如果您快速點擊下一個按鈕10次，您將不得不等待所有動畫結束。第二個'1'是停止正在播放的動畫動畫（實際完成動畫動畫）。因此，如果您按下下一個按鈕10次，動畫的前9次將立即完成，只顯示最後一個動畫。 .stop（0,1）是解決此重複動畫問題的常用方法。 – Cristy 2012-04-23 11:40:44

注意與停止（0,1），即使隊列沒有被清除沒有動畫，因爲當你點擊觸發按鈕，而動畫播放，將完成該動畫，只需執行這一項被添加到隊列中。 – Cristy 2012-04-23 11:43:58

好，每次我都翻過需要建設一批循環的東西，我利用jQuery Cycle PlugIn。這可能不是你優化問題的答案，但我認爲每個人都應該看看Cycle插件。

正如你可以看到here on the demo page，您可以利用下一個/上一個按鈕很容易，太。就像

$('#slideshow').cycle({ 
    fx:  'fade', 
    speed: 'fast', 
    timeout: 0, 
    next: '#next', 
    prev: '#prev' 
});

而你的HTML代碼可以保持這種方式。

來源

2012-04-21 14:43:00 thomas

謝謝！我知道循環插件。但要了解Jquery，我想自己構建它。而我只是無法設法垂直和水平居中cylce-plugin。在插件代碼中必須有一些東西，這使得很難... – Michael 2012-04-23 08:26:18

簡單的循環幻燈片與下一個/ prev鏈接

回答

相關問題