次回/前回のリンクを使ったシンプルなスライドショー

Question

私は、Jqueryの初心者で、これから始めることになります thisに基づいて、クリック可能なサイクルスライドショーを作成しようとしました。 これまでのところとても良いです。コードは機能します（下記参照）。 私の質問：

1. 簡単なコードの記述方法はありませんか？私は前と次のコードを同じように繰り返しています。

2. 次の/ prevリンクをクリックするとアニメーションが開始されます。アニメーション中にもう一度クリックすると、イメージがちらつくかエラーが発生することがあります。 アニメーションを強制的に終了してから、クリックに反応します。

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> 

Answer 1

http://jsfiddle.net/kPD4n/

。

1）「NEXT」ボタンと「PREV」ボタンに同じクラスを追加し、クリックしたことを確認します。
2）.stop（0,1）を追加してアニメーションの最後にジャンプします。

まだ少しばかりだが...

Answer 2

私はいくつかのサイクルのものを構築する必要性accrossに来

まあ毎回、私が利用jQuery Cycle PlugIn。これは最適化の質問に対する答えではないかもしれませんが、誰もがCycleプラグインを見ていたはずです。

here on the demo pageを見ると、次の/前のボタンも非常に簡単に使用できます。ちょうどのように

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

あなたのHTMLコードはそのままになります。あなたが行くあり