jquery - jQuery 面板滑块闪烁

Question

我正在研究一个简单的连续滑块面板。它似乎可以找到，但是滑动时上一个方向会闪烁。我尝试移动 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，轻量级。