Javascript 使用jQuery滑动并更改位置

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

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

Html:

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

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)

---

我只更改了

类名

，效果很好。您在动画中使用了错误的类

active

，而不是此类，您应该使用完整的

动画，因此我在左侧动画中使用了ul

列表的类

：

我改变了什么：

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

到

---

你的问题是你不知道你的李的实际位置 解决这个问题的方法是像这样滑动ul：

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

---

只是一个问题，为什么你没有使用库（例如Jquery插件），你可以找到很多？我只是想学习jQueryTanks来获得答案。您是否注意到，在最后一个滑块之后，它不会直接进入第一个滑块，而是存在一些间隙。你知道是什么原因导致的吗？对于最后一张幻灯片，更改

target===last？目标=0:target=target+1目标===last.index（）？目标=0:target=target+1：@Manwal这实际上是一张额外的空幻灯片。您的努力值得赞赏，但请参见最后一张幻灯片之后的幻灯片。它停止滑动（你从来没说过你打了一辆车
function slide(){
    $('ul').animate({'left':$('ul').position().left - width},300);
}