Javascript 第二个幻灯片正在等待第一个幻灯片完成

第二个幻灯片放映将等待第一个幻灯片放映完成

想象一下，如果我必须在一页中有四个幻灯片：幻灯片一、幻灯片二、幻灯片三和幻灯片四

所有幻灯片的包装器都具有相同的类且没有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-->     

---

---

---

---

我做了一些事情，我不认为你写了js代码，但这不是我的观点。您忘记了一些函数，或者错误地引用了变量

这就是我的工作：

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

---

如果将其改写为插件，则可以独立管理每个幻灯片：

JSFiddle： 请注意，这只是一个示例，而不是您通常如何干净地编写插件。我没有试图清理结构或代码，只是让它使用附加到容器的单独实例和本地元素。我用可怕的黄色边框设计了它们的样式，这样您就可以看到这些对象：

$.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插件和清理代码留给您阅读：）

定义函数，然后分别调用幻灯片，或者在循环中调用幻灯片（如果是列表，则在

$el

@fallereneaper中），谢谢您的分析。但是我编辑了我的问题，请…您没有定义

变量C

和

变量P

$.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();