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

Posted 2023-02-25

【中文标题】第二个幻灯片等待第一个幻灯片完成

【英文标题】：The second slideshow waiting for the first slideshow to finish

【发布时间】：2014-07-14 15:44:51

【问题描述】：

第二张幻灯片等待第一张幻灯片完成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();
);

---

---

---

【问题讨论】：

定义函数，然后单独或在循环中调用幻灯片，如果它是一个列表，它在$el

@Fallenreaper 感谢您对其进行分析。但我编辑了我的问题，拜托...

你没有定义variable C和variable P

【参考方案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 插件和清理代码的内容 :)

【参考方案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();
 );