Question

嘿伙计们，我想在这里做一个旋转木马。实际上我使用了列表项和里面的图像。现在我使用滚动滚动到一个特定的列表项。但重点是，当我点击一个拇指说2号码时，它会滚动到LI里面的图像并将图像设置为marign-left：0px; 我想要做的是滚动到居中的图像。（图像应滚动到居中）。

点击第4个拇指以查看效果。

我正在做一个小提琴。 MyFiddle

jQuery(document).ready(function($) {
        $("#fourthThumb").click(function() {

            $('html, body').animate({
                scrollLeft: $("#fourthImage").offset().left
            }, 2000);
        });
    });

当第4张图像居中时如何使滚动停止。 感谢。

Answer 1

这适用于您的情况吗？

    jQuery(document).ready(function($) {
        $("#fourthThumb").click(function() {                
            var windowWidth = jQuery(window).width()/2;
            var imagewidth = $("#fourthImage").width()/2;
            $('html, body').animate({                    
                scrollLeft: (($("#fourthImage").offset().left)-windowWidth+imagewidth)
            }, 2000);
        });
    });

http://jsfiddle.net/aKEJ7/1/

Answer 2

最好使其适用于每张图片：LIVE DEMO

jQuery(document).ready(function($) {
    $("#thumbsList li").click(function() {                
        var windowWidth = jQuery(window).width()/2;
        var index = $(this).index();
        var thisImg = $("#imagesList li img:eq("+index+")");
        var imagewidth = thisImg.width()/2;
        $('html, body').animate({                    
            scrollLeft: ((thisImg.offset().left)-windowWidth+imagewidth)
        }, 1000);
    });
});

滚动到列表项并在li位于中心时停止

2 个答案: