带有缩略图问题的Agile Carousel
带有缩略图问题的Agile Carousel
提问于 2012-07-14 03:50:04
我在我的网站上使用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
]回答 1
Stack Overflow用户
发布于 2012-10-26 23:27:29
你需要修改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");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11477396
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号