Question

你能不能对这个 DEMO 采取行动，让我知道为什么我无法将缩略图向左或向右滑动？

我想要做的是在每次点击时滑动一个缩略图，直到galley

的最后一个点

以下是我的代码：

$(document).ready(function(){ 

    // Gallery
    if(jQuery("#gallery").length){

        // Declare variables
        var totalImages = jQuery(".gallery > li").length, 
            imageWidth = jQuery(".gallery > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery(".gallery").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery("#gallery").width(totalWidth);

        jQuery("#gallery-prev").click(function(){
            if(jQuery(".allery").position().left < 0 && !jQuery(".gallery").is(":animated")){
                jQuery(".gallery").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });

        jQuery("#gallery-next").click(function(){
            if(jQuery(".gallery").position().left > stopPosition && !jQuery(".gallery").is(":animated")){
                jQuery(".gallery").animate({left : "-=" + imageWidth + "px"});
            }
            return false;
        });
    }

});

Answer 1

这是因为你在javascript中有很多类型错误。我发现了一些错误并纠正了它们。请试试这个：

$(document).ready(function() { 

    // Gallery
    if($(".gallery").length) {

        // Declare variables
        var totalImages = jQuery(".gallery > ul > li").length, 
            imageWidth = jQuery(".gallery > ul > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery(".gallery").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth) + imageWidth;
        jQuery(".gallery").width(visibleWidth);    
        jQuery(".gallery > ul").width(totalWidth);

        jQuery("#gallery-prev").click(function() {
            if(jQuery(".gallery > ul > li").position().left < 0 && !jQuery(".gallery").is(":animated")) {
                jQuery(".gallery > ul > li").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });

        jQuery("#gallery-next").click(function() {
            if(jQuery(".gallery > ul > li:first").position().left > stopPosition && !jQuery(".gallery").is(":animated")) {
                jQuery(".gallery > ul > li").animate({left : "-=" + imageWidth + "px"});
            }
            return false;
        });
    }

});

和css：

.gallery > ul {
    overflow-x: hidden;    
    width: 3000px;
}
.col-sm-3 {
    width:265px;   
}

链接到jsfiddle：http://jsfiddle.net/52VtD/2603/

滑动缩略图向左或向右的问题

1 个答案: