同じページで異なるパラメータを持つ同じ JQuery スクリプトを使用する必要があります。私のスクリプトは次のとおりです。
/*
* Simple Image Slider
* Read more at: http://stuff.nekhbet.ro/2009/06/23/simple-image-gallery-navigation-slider-plugin-in-jquery.html
* Version: 1.0.1
* Copyright (c) 2009 Trimbitas Sorin-Iulian
* Free of use (personal and commercial) as long as you keep this header in the file
* Requires: jQuery v1.3+
*/
;(function($) {
var totalCount = 0,selector,options,firstPos = 0,isRunning = false;
$.fn.simple_slider = function(settings) {
settings = $.extend({}, $.fn.simple_slider.defaults, settings);
selector = this.selector;
options = settings;
//get the number of images
totalCount = $(selector + " img").size();
//init
_init();
function _init(){
//hide them all (with the exception of the first X images)
$(selector + " img").each(function(i){
if (i >= options.display){
this.style.display = "none";
}
});
//put actions (onclick) on the buttons for navigation
//left
$("#" + options.leftID).click(function (){
if (isRunning == false){
_goLeft();
}
});
$("#" + options.leftID).hover(function (){
$(this).addClass("simple_slider_hover");
}, function (){
$(this).removeClass("simple_slider_hover");
});
//right
$("#" + options.rightID).click(function (){
if (isRunning == false){
_goRight();
}
});
$("#" + options.rightID).hover(function (){
$(this).addClass("simple_slider_hover");
}, function (){
$(this).removeClass("simple_slider_hover");
});
$("#" + options.leftID).addClass("simple_slider_disabled");
_checkNavigation();
}
function _goLeft(){
isRunning = true;
if (firstPos > 0){
//remove the last one
$(selector + " img:eq("+ (firstPos + options.display - 1) + ")").fadeOut("slow", function (){
firstPos--;
//add one from the beginning
$(selector + " img:eq("+ (firstPos) +")").fadeIn("slow",function(){
isRunning = false;
_checkNavigation();
});
});
} else {
isRunning = false;
}
}
function _goRight(){
isRunning = true;
if (firstPos + options.display < totalCount){
//remove the first one
$(selector + " img:eq("+ firstPos +")").fadeOut("slow", function (){
firstPos++;
//add one from the end
$(selector + " img:eq("+ (firstPos + options.display - 1) +")").fadeIn("slow",function(){
isRunning = false;
_checkNavigation();
});
});
} else {
isRunning = false;
}
}
function _checkNavigation(){
//left
if (firstPos == 0){
$("#" + options.leftID).addClass("simple_slider_disabled");
} else {
$("#" + options.leftID).removeClass("simple_slider_disabled");
}
//right
if ( (firstPos + options.display) >= totalCount){
$("#" + options.rightID).addClass("simple_slider_disabled");
} else {
$("#" + options.rightID).removeClass("simple_slider_disabled");
}
}
}
$.fn.simple_slider.defaults = {
display : 4,
leftID : null,
rightID : null
};
})(jQuery);
ページでこれを使用しようとしましたが、ページで最後にしか機能しません:
<script>
jQuery(document).ready(function($){
$('#slide_interviu-special').show();
$('#interviu-special_content').simple_slider({
'leftID': 'leftNav',
'rightID': 'rightNav',
'display': 4
});
$('#slide_interviu-special_bottom').show();
$('#interviu-special_bottom_content').simple_slider({
'leftID': 'leftNav_bottom',
'rightID': 'rightNav_bottom',
'display': 8
})
});
</script>