一页上有多个bxsliders。可以组合js吗?

时间:2015-07-12 22:14:14

标签: javascript jquery bxslider

是否可以在一个页面上组合我所拥有的4 Bxsliders的JS?请参阅下面的JS。

$(document).ready(function(){
    $('.bxslider2').bxSlider({
	slideWidth: 645,
	minSlides: 3,
	maxSlides: 3,
	moveSlides: 1,
	slideMargin: 0,
	responsive: false,
	controls: true,
	onSliderLoad: function () {
	    $('.bxslider2 > li:not(.bx-clone)').eq(1).addClass('active-slide');
	},
	onSlideBefore: function ($slideElement, oldIndex, newIndex) {
	    $('.bxslider2 li').removeClass('active-slide');
	    $($slideElement).next().addClass('active-slide');        
	}
    });
});

我不擅长JS,但我确信有一种方法可以组合JS,所以它只输入一次(而不是复制>用不同的类.bxslider2,.bxslider3等粘贴4倍)我需要确保每个旋转木马上的第一张幻灯片都有该类.active-slide。

1 个答案:

答案 0 :(得分:0)

$(document).ready(function(){
    function makeOnSliderLoad(index) {
        return function() {
            $('.bxslider' + String(index) + ' > li:not(.bx-clone)').eq(1).addClass('active-slide');
        }
    }   

    function makeOnSlideBefore(index) {
        return function($slideElement, oldIndex, newIndex) {
                $('.bxslider' + String(index) + ' li').removeClass('active-slide');
                $($slideElement).next().addClass('active-slide');        
        }
    }

    for(var sliderIndex = 1; sliderIndex < 5; sliderIndex++) {
        $('.bxslider' + String(sliderIndex)).bxSlider({
            slideWidth: 645,
            minSlides: 3,
            maxSlides: 3,
            moveSlides: 1,
            slideMargin: 0,
            responsive: false,
            controls: true,
            onSliderLoad: makeOnSliderLoad(sliderIndex),
            onSlideBefore: makeOnSlideBefore(sliderIndex)
        });
    }
});