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

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