0

学習目的のためだけに jQuery を使用して画像スライダーを開発しようとしています。私のコードは正常に動作していますが、最後のスライドに到達すると非常に扱いにくくなります。ユーザーが最初のスライドで次のボタンをクリックし、ユーザーが最初のスライドにジャンプしたときだけです。指定されたリンクを確認して、私を助けてください...

リンク

HTML

<div id="wrapper">
    <div class="slider_cont">
        <ul>
            <li>first slide</li>
            <li>second slide</li>
            <li>third slide</li>
            <li>fourth slide</li>
        </ul>
    </div>

    <div class="button">
        <button data-dir="prev">pev</button>
        <button data-dir="next">next</button>
    </div>
</div>

CSS

body{margin:0; padding:0;}
*{margin:0; padding:0;}
#wrapper{width:300px; margin:0 auto; padding:100px 0 0;}
.slider_cont{width:300px; height:100px; overflow:hidden; position:relative;}
.slider_cont ul{width:10000px; position:absolute;}
.slider_cont ul li{ list-style:none; float:left; width:300px; height:100px; text-align:center; color:#fff; background:#ccc;}

.button{padding:30px 0 0;}
.button button{padding:10px; margin:0 20px 0 0;}

脚本

var imageWidth = $('.slider_cont ul li').width(),
    imageLen =  $('.slider_cont ul li').length,
    totalWidth = imageWidth * imageLen,
    current = 1,
    lastWidth = totalWidth - imageWidth;


$('button').on('click',function(){
    var direction = $(this).data('dir');    
    (direction == 'next')?++current:--current;
    var Unit = (direction == 'next')?'-=':'+=';
    var curUnite = Unit+imageWidth;
    alert(curUnite)
    if(current!=0)
    {

        $('.slider_cont ul').animate({
            left: curUnite+'px',
            }, 500, function() {
            // Animation complete.
            });

        }

            if(current==0)
    {


        $('.slider_cont ul').animate({
            left: '-='+lastWidth+'px',
            }, 500, function() {
            current = imageLen;
                    });

        }
        if(current>imageLen)
        {
            $('.slider_cont ul').animate({
            left: '0px',
            }, 500, function() {
            current = 1;

            });
            }   
    })

どんな助けや提案もいただければ幸いです:)

4

2 に答える 2

1

jsFiddle demo

var imageWidth = $('.slider_cont ul li').width(),
    imageLen =  $('.slider_cont ul li').length,
    counter = 0;


$('button[data-dir]').click(function(){

    var dir = $(this).data('dir') == 'next' ? counter++ : counter-- ;
    counter = counter<0 ? imageLen-1 : counter%imageLen ;
    $('.slider_cont').stop().animate({scrollLeft: imageWidth*counter},800);

});
于 2013-02-02T18:43:06.363 に答える