-5

簡単なカルーセルのケースを書いていますが、アニメーションの問題があります。

前へまたは次へのボタンをすばやくクリックすると、リスト項目もすばやく表示されます。

修正方法は？

コードはここにあります：

html:

<div id="carousel" class="carousel">
    <div class="pagination">
        <a href="#" class="prev">prev</a>
        <a href="#" class="next">next</a>
    </div>
    <div class="play">
        <!-- initialize play number -->
    </div>
    <div class="pic">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
        </ul>
    </div>
</div>

JavaScript コード:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script type="text/javascript">
    $(function(){
        var containner=$('#carousel');
        var pagination=containner.find('.pagination');
        var play=containner.find('.play');
        var picList=containner.find('.pic ul li');
        var prev=pagination.find('.prev');
        var next=pagination.find('.next');
        var pageNum=0;
        var defaultAnimateDelay={
            show:800,
            hide:100
        };
        // initialize play number
        (function(picListLength){
            var playHtml='';
            for(var i=0; i<picListLength; i++){
                playHtml+='<a href="#" data-number="'+i+'">'+(i+1)+'</a>';
            }
            play.html(playHtml);
        })(picList.length);
        // 
        function Carousel(pageNumber){
            picList.eq(pageNumber)
            .stop(false,false)
            .animate({
                opacity:'show'
            },defaultAnimateDelay.show).siblings()
            .stop(false,false).animate({
                opacity:'hide'
            },defaultAnimateDelay.hide);
            // add Current class to current play number
            play.find('a')
            .eq(pageNumber)
            .addClass('current')
            .siblings('').removeClass('current');
        }
        // click prev event
        prev.on('click',function(e){
            e.preventDefault();
            if(pageNum===0){
                pageNum=(picList.length-1);
            }else {
                pageNum--;
            }
            Carousel(pageNum);
        });
        // click next event
        next.on('click',function(e){
            e.preventDefault();
            if(pageNum===(picList.length-1)){
                pageNum=0;
            }else{
                pageNum++;
            }
            Carousel(pageNum);
        });
        //  play number 
        play.on('click','a',function(e){
            e.preventDefault();
            pageNum=Number($(this).attr('data-number'));
            Carousel(pageNum);
        });

    });
</script>

Bootstrap carousel jsはうまく機能しますが、jquery停止機能を使用していません.Amazing.

4

1 に答える 1

0

コードに基づいて、すべてがすぐに行われます。コールバックがないため、アニメーションが終了するのを待つ必要はありません。コードを再編成して、もう少し読みやすく、リファクタリングしやすくすることができます。これが私が試すことです：

function show(pageNumber){
    return picList.eq(pageNumber)
    .animate({
        opacity:'show'
    },defaultAnimateDelay.show).promise();
}

function hide(pageNumber){
    return picList.eq(pageNumber)
    .stop(false,true)
    .siblings()
    .stop(false,false)
    .animate({
        opacity:'hide'
    },defaultAnimateDelay.hide).promise();
}

function Carousel(pageNumber){
    var promise = hide(pageNumber);
    promise.done(function(){
        show(pageNumber);
    });

    play.find('a')
    .eq(pageNumber)
    .addClass('current')
    .siblings('').removeClass('current');
}

これにより、表示アニメーションを開始する前に、非表示アニメーションが完了することが保証されます。別のオプションは、組み込みのコールバックを使用することですが、これは従う方が簡単だと思います。すべてのstopステートメントが必要かどうかはわかりませんが、残しました。

もう 1 つの問題 (最初のページの状態に影響する問題) は、最初は何も隠されていません。これを解決するには、次のように初期化コードを更新するだけです。

(function(picListLength){
    var playHtml='';
    for(var i=0; i<picListLength; i++){
        playHtml+='<a href="#" data-number="'+i+'">'+(i+1)+'</a>';
    }
    play.html(playHtml);
    hide(0); // hide all but one
})(picList.length);

JSFiddle: http://jsfiddle.net/infiniteloops/CUYbL/

JQuery の約束: http://api.jquery.com/promise/

于 2013-07-08T09:58:27.803 に答える