我有一个名为Slicebox的幻灯片脚本,为了适应移动设备和桌面设备不同的图片大小,我需要在我的网站上拥有两个相同的功能副本。
虽然这样有点不方便,但我喜欢这个幻灯片,所以我想知道是否可以更有效地使用它...
我不想在页脚中有两个几乎相同的脚本副本...只有三行内容不同,我想看看是否可以将它们合并。
以下是脚本:
<script type="text/javascript">
$(function() {
var Page = (function() {
var $navArrows = $( "#nav-arrows-sm" ).hide(),
$navDots = $( "#nav-dots-sm" ).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $( "#sb-slider-sm" ).slicebox( {
onReady : function() {
$navArrows.show();
$navDots.show();
$navFirst.addClass( "nav-dot-current" );
},
onBeforeChange : function( pos ) {
$nav.removeClass( "nav-dot-current" );
$nav.eq( pos ).addClass( "nav-dot-current" );
},
colorHiddenSides : "#444",
autoplay : true,
interval: 7000,
easing : "ease",
disperseFactor : 30
} ),
init = function() {
initEvents();
},
initEvents = function() {
$navArrows.children( ":first" ).on( "click", function() {
slicebox.next();
return false;
} );
$navArrows.children( ":last" ).on( "click", function() {
slicebox.previous();
return false;
} );
$nav.each( function( i ) {
$( this ).on( "click", function( event ) {
var $dot = $( this );
if( !slicebox.isActive() ) {
$nav.removeClass( "nav-dot-current" );
$dot.addClass( "nav-dot-current" );
}
slicebox.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
});
</script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $navArrows = $( "#nav-arrows-lg" ).hide(),
$navDots = $( "#nav-dots-lg" ).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $( "#sb-slider-lg" ).slicebox( {
onReady : function() {
$navArrows.show();
$navDots.show();
$navFirst.addClass( "nav-dot-current" );
},
onBeforeChange : function( pos ) {
$nav.removeClass( "nav-dot-current" );
$nav.eq( pos ).addClass( "nav-dot-current" );
},
colorHiddenSides : "#444",
autoplay : true,
interval: 7000,
easing : "ease",
disperseFactor : 30
} ),
init = function() {
initEvents();
},
initEvents = function() {
$navArrows.children( ":first" ).on( "click", function() {
slicebox.next();
return false;
} );
$navArrows.children( ":last" ).on( "click", function() {
slicebox.previous();
return false;
} );
$nav.each( function( i ) {
$( this ).on( "click", function( event ) {
var $dot = $( this );
if( !slicebox.isActive() ) {
$nav.removeClass( "nav-dot-current" );
$dot.addClass( "nav-dot-current" );
}
slicebox.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
});
</script>
在最顶部有这段代码:
var $navArrows = $( "#nav-arrows-lg" ).hide(),
$navDots = $( "#nav-dots-lg" ).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $( "#sb-slider-lg" ).slicebox( {
这里有三个ID:
#nav-arrows-lg
#nav-dots-lg
#nav-slider-lg
现在我使用的是 -sm
而不是 -lg
,我想知道是否可以像这样做:
var $navArrows = $( "#nav-arrows-sm" + "#nav-arrows-lg" ).hide(),
$navDots = $( "#nav-dots-sm" + "#nav-dots-lg" ).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $( "#sb-slider-sm" + "#sb-slider-lg" ).slicebox( {
这个变量有什么办法可以包含这两个ID吗?
我刚试了一下这样的方法: 我不确定如何使其工作,可能只是脚本的编写方式 -- 它可能无法处理这种情况。 我不确定。
var navArrowsList = "#nav-arrows-sm," + "#nav-arrows-lg";
var navDotsList = "#nav-dots-sm," + "#nav-dots-lg";
var navSliderList = "#sb-slider-sm," + "#sb-slider-lg";
var $navArrows = $(navArrowsList).hide(),
$navDots = $(navDotsList).hide(),
$nav = $navDots.children( "span" ),
$navFirst = $navDots.children( "span:first-child" ),
slicebox = $(navSliderList).slicebox( {