Question

第二张幻灯片等待第一张幻灯片显示完成IN THIS FIDDLE

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

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

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

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

这是我的HTML代码：

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

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代码，但那不是我的观点。您忘记了某些功能，或者错误地引用了变量。

这就是我的工作：

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

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

2 个答案:

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