第二张幻灯片等待第一张幻灯片完成

第二张幻灯片等待第一次幻灯片放映完成这个FIDDLE

想象一下，如果我必须在一个页面中有四个幻灯片：幻灯片显示一个，幻灯片显示两个，幻灯片显示三个，幻灯片显示四个。

所有幻灯片的包装器具有相同的类并且没有ID，并且幻灯片显示使用相同的脚本运行：

实际上，只有一个幻灯片（第一个）将在页面中显示，而其余的仍然是隐藏的。 如果仅点击引用第二张幻灯片的第二个链接，则第二张幻灯片将显示在页面中，同时第一张幻灯片将自动隐藏。

如果在加载页面后立即通过单击其链接在包装器DIV中显示第二个幻灯片，则第二个幻灯片显示为空白且没有内容。 它的空白问题是因为第二张幻灯片正在等待第一张幻灯片完成滑动其中的所有内容。

这是我的HTML代码：

---

---

---

---

---

这是我用来运行所有幻灯片的脚本 ：

 var $el = $('.bigandsmall'), // SETUP //////// F = 600 , // Fade Time P = 5000 , // Pause Time C = 0 , // Counter / Start Slide# (0 based) /////////////////// $sl = $('.bigPicture > div'), $th = $('.smallPicture > img'), N = $sl.length, T = 10000; $sl.hide().eq(C).show(); $th.eq(C).addClass('on'); // ANIMATION function anim() { $sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0); $th.removeClass('on').eq(C%N).addClass('on'); } // AUTO ANIMATE function autoAnim() { T = setTimeout(function() { C++; anim(); // Animate autoAnim(); // Prepare another iteration }, P+F); } autoAnim(); // Start loop // HOVER PAUSE $el.hover(function(e) { return e.type==='mouseenter'? clearTimeout( T ) : autoAnim(); }); // HOVER THUMBNAILS $th.on('mouseenter', function() { C = $th.index( this ); anim(); }); 

---

---

---

Answer 1

如果您将其重写为插件，则可以单独管理每个幻灯片：

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/CH5YN/2/

请注意这只是一个例子，而不是你通常如何干净地编写插件。 我没有尝试清理结构或代码，只是使它使用单独的实例和它所连接的容器的本地元素。 我用一个可怕的黄色边框设计它们，这样你就可以看到这些物体：

 $.fn.slideThis = function () { this.each(function () { // Reference to current DOM object var THIS = this; // Current DOM object as jQuery object var $this = $(this); THIS.$sl = $this.find('.bigPicture > div'), THIS.$th = $this.find('.smallPicture > img'), THIS.N = THIS.$sl.length, THIS.T = 10000; THIS.C = 6; THIS.$sl.hide().eq(THIS.C).show(); THIS.$th.eq(THIS.C).addClass('on'); THIS.P = 1000; THIS.F = 1000; $this.css({ border: "5px solid yellow" }); // ANIMATION THIS.anim = function () { THIS.$sl.eq(THIS.C % THIS.N).stop(1).fadeTo(THIS.F, 1).siblings().fadeTo(THIS.F, 0); THIS.$th.removeClass('on').eq(THIS.C % THIS.N).addClass('on'); } // AUTO ANIMATE THIS.autoAnim = function () { THIS.T = setTimeout(function () { THIS.C++; THIS.anim(); // Animate THIS.autoAnim(); // Prepare another iteration }, THIS.P + THIS.F); } THIS.autoAnim(); // Start loop // HOVER PAUSE THIS.$sl.hover(function (e) { return e.type === 'mouseenter' ? clearTimeout(THIS.T) : THIS.autoAnim(); }); // HOVER THUMBNAILS THIS.$th.on('mouseenter', function () { THIS.C = THIS.$th.index(this); THIS.anim(); }); }); }; // Attach one of these to every matching element $(".bigandsmall").slideThis(); 

我把它留给你阅读创建jQuery插件和清理代码:)

Answer 2

我做到了一点，我不认为你写了js代码，但那不是我的观点。 您忘记了某些function，或者错误地引用了变量。

这就是我的工作：

http://jsfiddle.net/CWjS7/4/

JS

 $sl = $('.bigPicture > div'), $th = $('.smallPicture > img'), N = $sl.length, T = 10000; C = 6; $sl.hide().eq(C).show(); $th.eq(C).addClass('on'); P = 1000; F = 1000; // ANIMATION function anim() { $sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0); $th.removeClass('on').eq(C%N).addClass('on'); } // AUTO ANIMATE function autoAnim() { T = setTimeout(function() { C++; anim(); // Animate autoAnim(); // Prepare another iteration }, P+F); } autoAnim(); // Start loop // HOVER PAUSE $sl.hover(function(e) { return e.type==='mouseenter'? clearTimeout( T ) : autoAnim(); }); // HOVER THUMBNAILS $th.on('mouseenter', function() { C = $th.index( this ); anim(); });