我正在从头开始创建一个非常简单的幻灯片:
...运行在 3 个主要变量上:
var slideshowItem_place = 0;
var slideshowItem_position = 0;
var slideshowItem_limit = parseInt($('.slideshowImage_container').length) - 1;
使幻灯片执行的主要功能是这个:
function slideshow_animateSliding(){
slideshowItem_position = 0 - (slideshowItem_place * 1280);
$('#slideshowContent').stop().animate({'left':slideshowItem_position + 'px'}, 1000, 'swing');
}
不过大拇指...
...我不知道如何让它们在播放时根据可见的幻灯片自动更改。
大拇指代码:
$('#slideshow_thumbsContainer').on('click', '> div:not(.slideshowThumbs_active)', function(){
var $this_slideshowThumbs_notActive = $(this);
var $this_slideshowThumbs_active = $('#slideshow_thumbsContainer > div.slideshowThumbs_active');
function thumbsDeactivate(){
// Deactivate currently slideshowThumbs_active animation...
}
function thumbsActivate(){
thumbsDeactivate();
// Activate clicked slideshowThumbs animation...
}
thumbsActivate();
});
我的猜测是我应该在运行幻灯片的那个中调用函数thumbsActivate() - slideshow_animateSliding() - 只是无法弄清楚逻辑。
这是我需要的一些伪代码:
- 如果slideshowItem_place = 0然后运行thumbsActivate(#slideshow_thumbOutline01)
- 如果slideshowItem_place = 1然后运行thumbsActivate(#slideshow_thumbOutline02)
- ETC...
完整的小提琴。
谢谢。
佩德罗