使用jQuery实现幻灯片效果和位置变化

Question

我正在尝试创建一个非常简单的幻灯片，只是为了学习目的。我希望自动将列表项向左滑动并循环播放。

我想出了以下代码，它可以滑动，但我无法设置正确的幻灯片位置（因为它只是闪烁并消失）。请查看演示以查看问题：

这是我的fiddle

Html：

<div class="wrap">
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>    
    </ul>
</div>

Jquery：

var width         = $('li').width();
var totalWidth    = $('li').length * width;
var count         = $('li').length;
var first         = $('li').eq(0);
var last          = $('li').eq(count-1);

$('ul').css({
    'width'     : totalWidth
});


first.addClass('active');

var start = function() {            
    target = $('.active').index();       
    target === last ? target = 0 : target = target+1;
    nextSlide(target);          
};

var nextSlide = function(target) {
    //console.log(target);
    $('.active').animate({'left':'-'+ width*target +'px'},300);
    $('li').removeClass('active').eq(target).addClass('active');
};

setInterval(function () {
                start();
            }, 3000)

- sam

---

只是一个问题，为什么你没有使用库（例如Jquery插件），你可以找到很多？ - pietro

我只是想学习jQuery。 - sam

Answer 1

我只改变了类名，它就可以工作了。你之前在动画中使用了错误的类active，而应该将整个<ul>动画化，所以我使用了ul的类list来进行左侧动画：

我做了什么更改：

$('.active').animate({'left':'-'+ width*target +'px'},300);

to

$('.list').animate({'left':'-'+ width*target +'px'},300);

DEMO

- Manwal

---

谢谢你的回答。你有没有注意到在最后一张幻灯片之后，它不会直接跳转到第一张幻灯片，而是有一些间隙。你知道是什么原因导致的吗？ - sam

将最后一张幻灯片的代码 target === last ? target = 0 : target = target+1; 更改为 target === last.index() ? target = 0 : target = target+1;：http://jsfiddle.net/rfornal/32v5q59L/2/ - rfornal

@Manwal 这实际上会滑动一个额外的空白幻灯片。 - Victor Radu

Answer 2

你的问题在于你不理解你的li实际上被定位在哪里。解决它的一种方法是像这样滑动ul：

function slide(){
    $('ul').animate({'left':$('ul').position().left - width},300);
}

http://jsfiddle.net/32v5q59L/5/

- Victor Radu

---

感谢您的努力，但是请注意，在最后一张幻灯片之后会出现滑动问题。它会停止滑动。 :( - Manwal

你从未说过你想要一个旋转木马。 - Victor Radu