DEMO

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

Answer 2

你的问题是你不明白你的实际位置在哪里在解决它的方法是像这样滑动ul：

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

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

使用jQuery滑动并更改位置

2 个答案:

DEMO