2

私は多かれ少なかれ Jquery の初心者であり、まずこれに基づいて、クリック可能な循環スライドショーを作成しようとしました。ここまでは順調ですね。コードは機能します (以下を参照)。私の質問:

  1. コードを書く簡単な方法はありませんか。前と次で同じコードを繰り返しています。

  2. 次/前のリンクをクリックするとアニメーションが開始され、アニメーション中にもう一度クリックすると、画像がちらついたり、エラーが発生したりすることがあります。クリックに反応する前に、アニメーションを強制的に終了させる方法はありますか?

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>
4

2 に答える 2

1

サイクル関連の構築が必要になるたびに、jQuery Cycle PlugInを利用しています。これは最適化の質問に対する答えではないかもしれませんが、誰もが Cycle プラグインに目を向けるべきだったと思います。

また、こちらのデモ ページでわかるように、次へ/前へのボタンも非常に簡単に使用できます。と同じように

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

そして、HTML コードはそのままにしておくことができます。

于 2012-04-21T14:43:00.923 に答える
0

http://jsfiddle.net/kPD4n/

ほらね。

1) 「次へ」ボタンと「前へ」ボタンに同じクラスを追加し、どちらがクリックされたかを確認します。
2) アニメーションの最後にジャンプする .stop(0,1) を追加。

まだ少しバグがありますが...

于 2012-04-21T14:48:15.147 に答える