3

我正在一个页面中创建多个滑块......但如果幻灯片的数量彼此不同，则无法获得正确的停止位置..

如果我保持幻灯片的数量相同，它会很好地工作..

但我需要不同数量的滑块中的幻灯片......

$(document).ready(function(){   
    $('.myslider-wrapper').each(function(){

    // thumbSlide
        var countSlider = $('.thumbSlide').length;
        if((".thumbSlide").length){        
            // Declare variables
            var totalImages = $(".thumbSlide > li").length, 
                imageWidth = $(".thumbSlide > li:first").outerWidth(true),
                totalWidth = imageWidth * totalImages,
                visibleImages = Math.round($(".thumbSlide-wrap").width() / imageWidth),
                visibleWidth = visibleImages * imageWidth,
                stopPosition = (visibleWidth - totalWidth/countSlider);  
            $(".thumbSlide").width(totalWidth+10);
            $(".thumbSlide-prev").click(function(){
                var parentMove = $(this).parent().prev('.thumbSlide');
                if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
                    parentMove.animate({left : "+=" + imageWidth + "px"});
                }               
                return false;
            });        
            $(".thumbSlide-next").click(function(){
                var parentMove = $(this).parent().prev('.thumbSlide');
                if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
                    parentMove.animate({left : "-=" + imageWidth + "px"});                  
                }               
                return false;
            });
        }

     });
});

这是 jsFiddle 网址：

http://jsfiddle.net/mufeedahmad/GLSqS/

4

1 回答 1

2

你通过做正确地遍历所有滑块$('.myslider-wrapper').each()，但是你做一些$('.thumbSlide')应该是的东西$('.thumbSlide', this)。

$('.thumbSlide')将选择页面上具有该类的所有元素，而$('.thumbSlide', this)在每个回调中将仅选择该特定包装器中的元素。

编辑：用这个解决方案修复你的 jsfiddle：http: //jsfiddle.net/GLSqS/1/

于 2013-08-26T09:06:49.333 回答