1

我创建了一个基本的轮播类型 slidshow，但是为了让它工作，我必须调用以下函数两次才能将 margin-left 属性实际设置为 0px。

$("#slide ul").stop().css('marginLeft', '0px');

我想知道我做错了什么，因为我是 jquery 的新手。

整个事情可以在这里找到http://jsfiddle.net/xZBZK/

只是为了方便起见的JavaScript：

var offset = 0;
var count;
var width = 500;
var height = 333;
var interval;

$(document).ready(function() {
    count = $("#slide ul").children().length;
    // Add the first image to the end so it loops.
    $("#slide ul").children().first().clone().appendTo("#slide ul");
    start();
});

function nextImage() {
    $("#slide ul").stop();
    offset+=width;
    if(offset / width == count) { 
        $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
    }
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);
    return offset;
}

function resetImage() {
    $("#slide ul").stop().css('marginLeft', '0px');
    $("#slide ul").stop().css('marginLeft', '0px');
    offset = 0;
    //start();
}

function stop() {
    clearInterval(interval);
}

function start() {
    interval = setInterval(nextImage, 3000);
}

我正在使用JQuery 1.9.1

4

1 回答 1

2

是因为您将两个动画加载到队列中吗？

if(offset / width == count) { 
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
}
$("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);

也许你想要：

if(offset / width == count) { 
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700, 'linear', resetImage);
}else{
    $("#slide ul").animate({'marginLeft':'-'+offset+'px'}, 700);
}

我认为.stop()只会停止当前动画并且不会清除队列。所以它默认为之前的动画。

于 2013-03-26T20:02:15.503 回答