第二张幻灯片等待第一张幻灯片完成 [英] The second slideshow waiting for the first slideshow to finish
问题描述
第二张幻灯片等待第一张幻灯片完成 IN THE FIDDLE
The second slideshow waits for the first slideshow to finish IN THIS FIDDLE
想象一下，如果我必须在一个页面中有四个幻灯片：幻灯片显示一个，幻灯片显示两个，幻灯片显示三个，幻灯片显示四个。
Imagine if I have to have four slideshows in one page: slideshow one, slideshow two, slideshow three, and slideshow four.
所有幻灯片的包装器都具有相同的类并且没有ID，并且幻灯片显示使用相同的脚本运行：
The wrapper of all of the slideshows have the same class and has no ID, and the slideshows are run with a same script:
实际上，只有一个幻灯片（第一个）将在页面中显示，而其余的仍然是隐藏的。如果仅点击引用第二张幻灯片的第二个链接，则第二张幻灯片将显示在页面中，同时第一张幻灯片将自动隐藏。
Actually, only one slideshow (the first) which is going to be shown in the page, while the rest are still hidden. If only the second link which refers to the second slideshow is clicked then the second slideshow will be shown in the page while at the same time the first slideshow will be hidden automatically.
如果第二张幻灯片显示在包装DIV中，请在加载页面后立即点击其链接，第二张幻灯片显示为空白，没有任何内容。它的空白问题是因为第二张幻灯片正在等待第一张幻灯片完成滑动其中的所有内容。
If the second slideshow is shown in a wrapper DIV by clicking its link soon after you load the page, the second slideshow is blank with no content. The problem of its blank is because the second slideshow is waiting for the first slideshow to finish in sliding all the contents inside it.
这是我的HTML代码：
Here is my html code:
<!--SLIDESHOW ONE-->
<div class="bigandsmall">
<div class="bigPicture">
<div class="easyzoom easyzoom--overlay">
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_luna_1.jpg"></div>
<div class="easyzoom easyzoom--overlay">
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_luna_2.jpg"></div>
</div>
<div class="smallPicture">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_luna_1.jpg">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_luna_2.jpg">
</div>
</div>
<!--END OF SLIDESHOW ONE-->
<!--SLIDESHOW TWO-->
<div class="bigandsmall">
<div class="bigPicture">
<div class="easyzoom easyzoom--overlay">
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_luna_1.jpg"></div>
<div class="easyzoom easyzoom--overlay">
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_luna_2.jpg"></div>
</div>
<div class="smallPicture">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_luna_1.jpg">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_luna_2.jpg">
</div>
</div>
<!--END OF SLIDESHOW TWO-->
这是我用来<脚本的运行所有幻灯片：
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();
});
推荐答案
如果您将其重写为插件，则可以单独管理每个幻灯片：
If you rewrite it as a plugin instead, you can manage each slideshow independently:
请注意这只是一个例子，而不是你通常如何干净地编写插件。我没有尝试清理结构或代码，只是使它使用单独的实例和它所附加的容器的本地元素。我用一个可怕的黄色边框设置它们，以便你可以看到对象：
Please note this is a just an example, not how you would normally write plugins cleanly. I did not attempt to cleanup the structure or code, just made it use separate instances and elements local to the container it is attached to. I styled them with a horrible yellow border so you can see the objects:
$.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插件和清理代码的信息：）
这篇关于第二张幻灯片等待第一张幻灯片完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
