javascript - 使用 jQuery 滑动和改变位置

Question

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

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

Here's my 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)

Answer 1

我改了Class name只有它有效。您使用了错误的类 active对于动画，而不是这个你应该动画你完整的<ul>所以我使用了 ul list 类对于左侧动画:

我改变了什么:

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

到

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

DEMO