使用jQuery滑动并更改位置

Question

我正在尝试创建一个非常简单的幻灯片,仅用于学习目的.我想在循环中自动将列表项向左滑动.

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

这是我的小提琴

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