问题
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.
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.
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.
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-->
Here is the script that I use to run the all slideshows:
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();
});
回答1:
If you rewrite it as a plugin instead, you can manage each slideshow independently:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/CH5YN/2/
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();
I leave it to you read up on creating jQuery plugins and cleanup the code :)
回答2:
I did upto some point, I don't think you wrote the js code, but that's not my point. You are forgetting some functions, or are referring variables incorrectly.
This is what I got working:
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();
});
来源：https://stackoverflow.com/questions/24740462/the-second-slideshow-waiting-for-the-first-slideshow-to-finish