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

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();
});

---

---

---

解决方案

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 :)