我正在使用免费的jquery画廊，我希望在页面上创建尽可能多的画廊。问题是如何编写javascript将需要复制和重命名代码。以下是呈现图库的javascript
$(document).ready(function(){
var slideShow = $('#slideShow'),
ul = slideShow.find('ul'),
li = ul.find('li'),
cnt = li.length;
// As the images are positioned absolutely, the last image will be shown on top.
// This is why we force them in the correct order by assigning z-indexes:
updateZindex();
if($.support.transform){
// Modern browsers with support for css3 transformations
li.find('img').css('rotate',function(i){
// Rotating the images counterclockwise
return (-90*i) + 'deg';
});
// Binding a custom event. the direction and degrees parameters
// are passed when the event is triggered later on in the code.
slideShow.bind('rotateContainer',function(e,direction,degrees){
// Enlarging the slideshow and photo:
slideShow.animate({
width : 510,
height : 510,
marginTop : 0,
marginLeft : 0
},'fast',function(){
if(direction == 'next'){
// Moving the topmost image containing Li at
// the bottom after a fadeOut animation
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
}
else {
// Showing the bottomost Li element on top
// with a fade in animation. Notice that we are
// updating the z-indexes.
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
}
// Rotating the slideShow. css('rotate') gives us the
// current rotation in radians. We are converting it to
// degress so we can add 90 or -90 to rotate it to its new value.
slideShow.animate({
rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
},'slow').animate({
width : 490,
height : 490,
marginTop : 10,
marginLeft : 10
},'fast');
});
});
// By triggering the custom events below, we can
// show the previous / next images in the slideshow.
slideShow.bind('showNext',function(){
slideShow.trigger('rotateContainer',['next',90]);
});
slideShow.bind('showPrevious',function(){
slideShow.trigger('rotateContainer',['previous',-90]);
});
}
else{
// Fallback for Internet Explorer and older browsers
slideShow.bind('showNext',function(){
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
});
slideShow.bind('showPrevious',function(){
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
});
}
// Listening for clicks on the arrows, and
// triggering the appropriate event.
$('#previousLink').click(function(){
if(slideShow.is(':animated')){
return false;
}
slideShow.trigger('showPrevious');
return false;
});
$('#nextLink').click(function(){
if(slideShow.is(':animated')){
return false;
}
slideShow.trigger('showNext');
return false;
});
// This function updates the z-index properties.
function updateZindex(){
// The CSS method can take a function as its second argument.
// i is the zero-based index of the element.
ul.find('li').css('z-index',function(i){
return cnt-i;
});
}
});
var slideShow在整个脚本中被引用，我正在考虑使用onclick但是如果它被包装在一个函数中并且在所有带有名称的类中随叫随到它会更好。
这是html
<div id="slideShowContainer">
<div id="slideShow">
<ul>
<li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
<li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
<li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
<li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
</ul>
</div>
<a id="previousLink" href="#">»</a>
<a id="nextLink" href="#">«</a>
</div>
答案 0 :(得分：0)
我认为一个简单的解决方案是在元素中使用包装所有图库，然后使用类而不是ID来定位它们，如
$(document).ready(function() {
$('.slide-container').each(function() {
var slideShow = $('.slide-show', this),
ul = slideShow.find('ul'),
li = ul.find('li'),
cnt = li.length;
// As the images are positioned absolutely, the last image will be shown on top.
// This is why we force them in the correct order by assigning z-indexes:
updateZindex();
if ($.support.transform) {
// Modern browsers with support for css3 transformations
li.find('img').css('rotate', function(i) {
// Rotating the images counterclockwise
return (-90 * i) + 'deg';
});
// Binding a custom event. the direction and degrees parameters
// are passed when the event is triggered later on in the code.
slideShow.bind('rotateContainer', function(e, direction, degrees) {
// Enlarging the slideshow and photo:
slideShow.animate({
width: 510,
height: 510,
marginTop: 0,
marginLeft: 0
}, 'fast', function() {
if (direction == 'next') {
// Moving the topmost image containing Li at
// the bottom after a fadeOut animation
ul.find('li:first').fadeOut('slow', function() {
$(this).remove().appendTo(ul).show();
updateZindex();
});
} else {
// Showing the bottomost Li element on top
// with a fade in animation. Notice that we are
// updating the z-indexes.
var liLast = ul.find('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
}
// Rotating the slideShow. css('rotate') gives us the
// current rotation in radians. We are converting it to
// degress so we can add 90 or -90 to rotate it to its new value.
slideShow.animate({
rotate: Math.round($.rotate.radToDeg(slideShow.css('rotate')) + degrees) + 'deg'
}, 'slow').animate({
width: 490,
height: 490,
marginTop: 10,
marginLeft: 10
}, 'fast');
});
});
// By triggering the custom events below, we can
// show the previous / next images in the slideshow.
slideShow.bind('showNext', function() {
slideShow.trigger('rotateContainer', ['next', 90]);
});
slideShow.bind('showPrevious', function() {
slideShow.trigger('rotateContainer', ['previous', -90]);
});
} else {
// Fallback for Internet Explorer and older browsers
slideShow.bind('showNext', function() {
ul.find('li:first').fadeOut('slow', function() {
$(this).remove().appendTo(ul).show();
updateZindex();
});
});
slideShow.bind('showPrevious', function() {
var liLast = ul.find('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
});
}
// Listening for clicks on the arrows, and
// triggering the appropriate event.
$('.previous', this).click(function() {
if (slideShow.is(':animated')) {
return false;
}
slideShow.trigger('showPrevious');
return false;
});
$('.next', this).click(function() {
if (slideShow.is(':animated')) {
return false;
}
slideShow.trigger('showNext');
return false;
});
// This function updates the z-index properties.
function updateZindex() {
// The CSS method can take a function as its second argument.
// i is the zero-based index of the element.
ul.find('li').css('z-index', function(i) {
return cnt - i;
});
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-container">
<div class="slide-show">
<ul>
<li>
<img src="img/photos/1.jpg" width="100%" alt="Fish" />
</li>
<li>
<img src="img/photos/2.jpg" width="100%" alt="Ancient" />
</li>
<li>
<img src="img/photos/3.jpg" width="100%" alt="Industry" />
</li>
<li>
<img src="img/photos/4.jpg" width="100%" alt="Rain" />
</li>
</ul>
</div>
<a class="previous" href="#">»</a>
<a class="next" href="#">«</a>
</div>
<div class="slide-container">
<div class="slide-show">
<ul>
<li>
<img src="img/photos/1.jpg" width="100%" alt="Fish" />
</li>
<li>
<img src="img/photos/2.jpg" width="100%" alt="Ancient" />
</li>
<li>
<img src="img/photos/3.jpg" width="100%" alt="Industry" />
</li>
<li>
<img src="img/photos/4.jpg" width="100%" alt="Rain" />
</li>
</ul>
</div>
<a class="previous" href="#">»</a>
<a class="next" href="#">«</a>
</div>