jQuery面板滑块闪烁

Question

我正在研究一个简单的连续滑块面板。它似乎可以找到，但当它滑动时，prev方向会闪烁。我尝试移动jQuery操作的顺序，但它似乎没有帮助，任何想法？

http://jsfiddle.net/isherwood/FWUSA/3

$(".next").click(function () {
    $('.slides').animate({
        'marginLeft': '-=530px'
    }, function () {
        $('ul.slides li:last').after($('ul.slides li:first'));
        $(".slides").css('marginLeft', 0);
    });
});

$(".prev").click(function () {
    $('.slides').animate({
        'marginLeft': '530px'
    }, function () {
        $('ul.slides li:first').before($('ul.slides li:last'));
        $(".slides").css('marginLeft', 0);
    });
});

Answer 1

您将一个类应用于所有图像，并且您的代码适用于该类。

$(".slides").css('marginLeft', 0);

它使用一类幻灯片控制所有元素。由于您的所有图像都有该类，因此它们都会立即移动。您需要找到区分每个图像的方法。尝试添加.next()。 http://api.jquery.com/next/

** * ** * * 我的意见的 * ** * ** * **

我相信你正在尝试创建一个JQuery滑块？

几周前我走了那条路。虽然我有一个最终运作，但它并不好。有大量的浏览器解决方案和黑客是必需的。我建议使用插件。我正在使用Flexslider。 http://www.woothemes.com/flexslider/

它可以自定义，简单，使用JQuery，轻量级。