我是一名新手网页设计师，刚刚设法使用 Drupal 创建了我的第一个网站。在其中一个页面上，我有多个带有按钮的 jquery 滑块，允许用户滚动浏览图像。滑块工作正常，如果不理会自动滚动，但是单击一个滑块上的按钮滚动图像也会使页面上的所有其他滑块也滚动其图像。
每个滑块按钮也会导航到其正确的图像，例如单击第一个滑块上的第二个按钮将滚动到第一个滑块上的第二个图像，但它也会将每隔一个滑块滚动到其第二个图像。
你可以在我的网站上看到这个问题： http ://carlingeneralbuilders.co.uk/?q=gallery
滑块取自一个免费的 drupal 主题：bluemasters。
这是滑块的 jquery 代码：
jQuery(document).ready(function($) {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//1.Get size of images, 2.how many there are, 3.then determine the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
//var imageSum = $(".image_reel").map(function() {
//return($(this).find("img").length)
//}).get();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
// Code for caption that pops up for each individual image
//$(".desc").stop(true,true).slideUp('slow');
//$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
然后我使用以下 html 和 php 代码通过 drupal 上的一个块来实现每个滑块：
<div class="main_view">
<div class="window">
<div class="image_reel">
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/61.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/62.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/63.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/64.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/65.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/66.jpeg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">Bathroom</div>
</div>
</div>
<div class="paging">
<a rel="1" href="#">61</a>
<a rel="2" href="#">62</a>
<a rel="3" href="#">63</a>
<a rel="4" href="#">64</a>
<a rel="5" href="#">65</a>
<a rel="6" href="#">66</a>
</div>
</div>
我认为问题在于 jquery 文件只对所有滑块调用一次，因此所有图像都以某种方式组合在一起，但是我是一个真正的新手，而且我对 html 编码有一定的了解， jquery 和 drupal 目前非常有限。
提前致谢