Question

这与我上一个问题（现已解决）的页面相同，但主机已经关闭，所以我无法显示实例。我正在使用Fearless Flyer的内容，因为它有最简单的标记和放大器。我发现的代码。在这里看到： http://demo.fearlessflyer.com/html/demo/content-slider/

然而，很明显它是每页一个滑块，而不是多个滑块。如果我尝试使用两个滑块实现它不变，则第二个滑块不起作用，因为滑动的负边距值在第一个滑块已经发生的计算之上相乘 - 因此边距会缩小 - 右侧4000px，没有可显示的照片。

我已经使用以下标记来使用两个滑块：

我有两个滑块，一个名为“lightbox_gallery”，一个名为“lightbox_5gruende”。

<div id="lightbox_gallery" class="lightbox_window">
    <div id="mother_gallery">
        <ul>
            <li><img id="test" src="gallery_02.jpg" /><a class="next" href="#">next</a></li>
            <li><img src="gallery_01.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
            <li><img src="gallery_02.jpg" /><a class="previous" href="#">prev</a><a class="startover"             href="#">startover</a></li>
        </ul>
    </div>
</div> <!--end lightbox div -->

<div id="lightbox_5gruende" class="lightbox_window">
    <div id="mother_5gruende">
        <ul>
            <li><img id="test" src="gallery_03.jpg" /><a class="next" href="#">next</a></li>
            <li><img src="gallery_03.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
            <li><img src="gallery_02.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
        </ul>
    </div>
</div> <!--end lightbox div -->

然后这个令人难以置信的hacky脚本：

$(window).load(function() {

var theImage = $('#lightbox_gallery ul li img');
var theImage2 = $('#lightbox_5gruende ul li img');
var theWidth = 790;

$('#mother_gallery').css({
    //stuff
});
    //get total of image sizes and set as width for ul 
var totalWidth = theImage.length * theWidth;
$('ul').css({
    width: function(){
    return totalWidth;  
}

});
$('#mother_5gruende').css({
    //stuff
});
    //get total of image sizes and set as width for ul 
var totalWidth = theImage.length * theWidth;
$('ul').css({
    width: function(){
    return totalWidth;  
}

}); 
$(theImage).each(       
    function(intIndex){             
            $(this).nextAll('a')
            .bind("click", function(){
                if($(this).is(".next")) {

                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (-(intIndex + 1) * 790)              
                    }, 1000)                    

                } else if($(this).is(".previous")){

                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (-(intIndex - 1) * 790)              
                    }, 1000)    


                } else if($(this).is(".startover")){

                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (0)              
                    }, 1000)

                }

            });//close .bind()                                   
});//close .each()

// THEN REPEATING THE SAME WITH SLIGHTLY DIFFERENT NAMES BECAUSE I DO NOT KNOW HOW TO WRITE A REUSABLE FUNCTION //

$(theImage2).each(      
    function(intIndex2){                
            $(this).nextAll('a')
            .bind("click", function(){
                if($(this).is(".next")) {

                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (-(intIndex2 + 1) * 790)             
                    }, 1000)                    

                } else if($(this).is(".previous")){

                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (-(intIndex2 - 1) * 790)             
                    }, 1000)    


                } else if($(this).is(".startover")){

                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (0)              
                    }, 1000)

                }

            });//close .bind()                                   
});//close .each()

});//doc ready

这太难看了！它有效，但我不想让两个完全独立的滑块功能为不同滑块中的图像做同样的事情。

如何重写这个，以便$（theImage）.each中的计算可以用于两个滑块？

Answer 1

可以做类似的事情：

function animateParentUl( $element, marginValue ) {
    $element.parent('li').parent('ul')
        .animate({"margin-left": marginValue }, 1000)   
}

然后将其称为：

$(theImage2).each(      
    function(intIndex2){                
            $(this).nextAll('a')
            .bind("click", function(){
                var $this = $(this);
                if($this.is(".next")) {
                    animateParentUl( $this, (-(intIndex2 + 1) * 790) );
                } else if($this.is(".previous")){
                    animateParentUl( $this, (-(intIndex2 - 1) * 790) );
                } else if($this.is(".startover")){
                    animateParentUl( $this, 0 );
                }

            });//close .bind()                                   
});//close .each()

JQuery函数编写101：如何重用这个函数而不是重新创建它？

1 个答案: