目标是在一个页面上放置许多幻灯片，每个幻灯片都隐藏，但可以通过单击相关链接来激活。第一个应该在页面加载后显示并开始循环显示其图像。单击其他链接应激活它的相关幻灯片并隐藏原始幻灯片。任何后续链接/幻灯片都应该发生同样的情况 - 相对于点击的链接，一次只显示一个幻灯片 - 而所有其他幻灯片都被隐藏，直到点击相关链接为止。
这里是我在以下地方的JSfiddle：
https://jsfiddle.net/9b20o33s/
这里会粘贴一大块代码，但如果我想要包含一个JSfiddle链接，stackoverflow似乎坚持我粘贴一些代码，所以这是我当前的幻灯片脚本：
// JavaScript Document
$(function(){
var slideshow_class_array = [];
var slideshow_divs;
var temp_id;
slideshow_divs = document.getElementsByClassName('slideshow_container');
$slideshow_obj_array = $.makeArray(slideshow_divs);
$('.slideshow_container').hide();
$.each($slideshow_obj_array, function(){
$class_holder = this.getAttribute('name');
slideshow_class_array.push($class_holder);
});
$('.slideshow_link').click(function(){
for (var i=0; i < slideshow_class_array.length; i++ ) {
temp_id = this.id.toString();
temp_class = slideshow_class_array[i].toString();
if ( temp_id === temp_class ) {
$('div[name]').hide();
$('div[name="'+temp_id+'"]').show();
$('div[name] ul').hide();
$('div[name="'+temp_id+'"] ul').show();
$('div[name="'+temp_id+'"] .slideshow_fader img:gt(0)').hide();
setInterval(function(){
$('div[name="'+temp_id+'"] .slideshow_fader :first-child').fadeOut()
.next('div[name="'+temp_id+'"] .slideshow_fader img').fadeIn()
.end().appendTo('div[name="'+temp_id+'"] .slideshow_fader');},
4000);
} else {
$('div[name]').hide();
}
}
});
});
我真的很感激任何帮助。