Question

我正在尝试使用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;}

SCRIPT

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;

            });
            }   
    })

任何帮助和建议将不胜感激：）

Answer 1

你这样做：

 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.
    });

}

奇怪的动画来自哪里。因为你排队第二个。哪个跳回到开始。将第一个动画放入else语句中。你不会有奇怪的跳跃。

实例：http://jsfiddle.net/VMZ8J/3/

Answer 2

的 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); });

创建jQuery图像滑块

2 个答案: