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

2

你这样做：

 if (current == 0) {


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

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

    });
}
else if (current != 0) {

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

}

这就是奇怪动画的来源。因为你排队第二个。Whichc 跳回到开头。将第一个动画放在 else 语句中。你不会有奇怪的跳跃。

现场示例：http: //jsfiddle.net/VMZ8J/3/

于 2013-02-02T18:37:15.360 回答
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 回答