敏捷传送带缩略图问题

Question

我在我的网站上使用Agile Carousel插件进行了两次不同的幻灯片演示。第一个是顶部;我在那里没有问题。我的问题在于底部（在About部分），我试图用相应的缩略图创建轮播。我创建了缩略图并滚动浏览它们，但一旦它到达可见元素的末尾，它就不会将幻灯片放映到下一组缩略图。

我的问题是：如何在幻灯片放映过程中将自己的缩略图自己放置在旋转木马上？提前致谢！

下面是一些代码片段：

//Bottom Slideshow instantiation 
$.getJSON("php/bottom/bottomShow_data.php", function(data) 
{ 
    $(document).ready(function() 
    { 
     $("#bottomSlide").agile_carousel({  
      // required settings 
      carousel_data: data, 
      carousel_outer_height: 525, 
      carousel_height: 450, 
      slide_height: 450, 
      carousel_outer_width: 713, 
      slide_width: 713, 
      // end required settings 

      transition_type: "fade", 
      transition_time: 600, 
      timer: 3000, 
      continuous_scrolling: true, 
      control_set_1: "previous_button,pause_button,next_button", 
      control_set_2: "content_buttons" 
     }); 
    }); 
}); 

JSON数据片段：

[ 
    { "content": "<div class='slide_inner'><img class='photo' src='../images/slideshow/bottom/1.jpg' alt='UGM 1' /></div>", 
    "content_button": "<div class='thumb'><img src='../images/slideshow/bottom/1.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>" }, 
    { "content": "<div class='slide_inner'><img class='photo' src='images/slideshow/bottom/2.jpg' alt='UGM 2' /></div>", 
    "content_button": "<div class='thumb'><img src='images/slideshow/bottom/2.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>" }, 
.... 
14 objects total 
] 

Answer 1

你需要修改JavaScript（agile_carousel.alpha.js），可能有一个更好的办法（即更有效）做到这一点，但这应该工作。

修改add_selected_class功能，并添加以下代码：

var n = 0; 

for (n=1; n<=number_of_slides; n++) { 
obj.find(".content_button_" + n).css("top", '0'); 
obj.find(".content_button_" + n).removeClass("thumb_show").addClass("thumb_hide"); 
} 

这是做一个粗暴的方式，但所有这确实是隐藏所有缩略图按钮 因为你可以使用的东西的thumb_show/thumb_hide类就像在你的CSS如下：

.thumb_hide { display:none; position:relative; top: -50000px; left:0; z-index:0; opacity:0;} 
.thumb_show { display:block; position:relative; top:0; left:0; z-index:20; opacity:1; } 

为add_selected_class功能代码的其余部分只是决定5个缩略图集合取决于该滑块当前显示显示哪些。

var $thumb_set_length = 5; 
var $button_row_pos = 0; 

$button_container_offset_top = Math.round(obj.find(".content_buttons_container").offset().top);     
$current_button_offset_top = Math.round(obj.find(".content_button_" + slide_num).offset().top); 

//Depending on the layout of your page and top padding/margin added to parent elements you will need to fiddle about with the values below to calculate where the buttons should be positioned. 
$adjuster = Math.round(obj.find(".content_button_" + slide_num).height()/2); 

$button_row_pos = ($button_container_offset_top - $current_button_offset_top) * -1 - $adjuster + 26; 

//if slide_num % 5 == 1 than this is the 1st of the 5 slides     

if ((slide_num % $thumb_set_length) == 1) { 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+3)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+4)).removeClass("thumb_hide").addClass("thumb_show"); 


obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+2)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+3)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+4)).css("top", $button_row_pos + "px");      

} 



//if slide_num % 5 == 2 than this is the 2nd of the 5 slides     

if ((slide_num % $thumb_set_length) == 2) { 

obj.find(".content_button_" + (slide_num-1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+3)).removeClass("thumb_hide").addClass("thumb_show"); 


obj.find(".content_button_" + (slide_num-1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+2)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+3)).css("top", $button_row_pos + "px"); 

} 


//if slide_num % 5 == 3 than this is the 3rd of the 5 slides     

if ((slide_num % $thumb_set_length) == 3) { 

obj.find(".content_button_" + (slide_num-2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+2)).removeClass("thumb_hide").addClass("thumb_show"); 


obj.find(".content_button_" + (slide_num-2)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num-1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+2)).css("top", $button_row_pos + "px"); 

} 


//if slide_num % 5 == 4 than this is the 4th of the 5 slides     

if ((slide_num % $thumb_set_length) == 4) { 

obj.find(".content_button_" + (slide_num-3)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+1)).removeClass("thumb_hide").addClass("thumb_show"); 


obj.find(".content_button_" + (slide_num-3)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num-2)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num-1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+1)).css("top", $button_row_pos + "px"); 

} 


//if slide_num % 5 == 0 than this is the last of the 5 slides    

if ((slide_num % $thumb_set_length) == 0) { 

obj.find(".content_button_" + (slide_num-4)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-3)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 
obj.find(".content_button_" + (slide_num-4)).css("top", $button_row_pos + "px");      

obj.find(".content_button_" + (slide_num-3)).css("top", $button_row_pos + "px");      

obj.find(".content_button_" + (slide_num-2)).css("top", $button_row_pos + "px");      

obj.find(".content_button_" + (slide_num-1)).css("top", $button_row_pos + "px");     

obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 
}