Question

我一直试图创建自己的Javascript滑块插件，（我意识到那里有很多，但我想将它视为一种学习练习），

我遇到的问题是动画绕过一次，然后停止，我试图检查这一点，看看我做错了但我找不到任何理由，如果有人可以帮助我我非常感激。

HTML

    <div id="cjwSlider">
        <div style="background-color: #6495ed"></div>
        <div style="background-color: #62ed43"></div>
        <div style="background-color: #ed5943"></div>
    </div>

JAVASCRIPT

    var cjwSlider = $('#cjwSlider');
    var sliderItems = cjwSlider.children('div');

    $(document).ready(function () {
        sliderItems.each(function( index ) {
            $(this).css('z-index', index);
        });

        window.setInterval(function(){

            var maxValue = findMaxZIndex();
            var currentItem = sliderItems.filter(function() {
                return $(this).css('z-index') == maxValue;
            });

            currentItem.addClass("hiddenDiv").delay(1000).queue(function() {
                sliderItems.each(function( index ) {
                    $(this).css('z-index', parseInt($(this).css('z-index')) + 1);
                });

                currentItem.css('z-index', 0);
                currentItem.removeAttr('class');
            });

        }, 4000);


    });

    function findMaxZIndex() {
        var maxValue = undefined;
        $(sliderItems).each(function() {
            var val = $(this).css('z-index');
            val = parseInt(val, 10);
            if (maxValue === undefined || maxValue < val) {
                maxValue = val;
            }
        });
        return maxValue;
    }

Answer 1

PLUGIN DEMO IN ACTION

你说你想要一个插件所以你走了。
它甚至会在mouseenter上停止。（我个人讨厌只是在悬停它时无法停止画廊。）
^{我完全不了解z-index的需要，因此您可以从HTML中平静地删除所有内容，而不必费心。}

<div class="cjwFader" id="el1">
    <div style="background: red;">   1 </div>
    <div style="background: green;"> 2 </div>
    <div style="background: gold;">  3 </div>
</div>

<强> CSS：
_{（唯一需要的，但你也可以让jQ应用孩子position）}

.cjwFader > div {
    position: absolute;
}

最后是插件：

(function($){ 
$.fn.cjwFader = function(opts){ 

    // Default Settings
    var S = $.extend({
      fade: 400,
      wait: 2000,
      startAt: 0 
      //, need more? add more.
    },opts);

    return $(this).each(function(){

       var that = $(this),
           child = $('>*',that),
           nOfChildren = child.length,
           sI;

       function animate(){
         child.eq( S.startAt = ++S.startAt % nOfChildren )
              .fadeTo( S.fade,1 )
              .siblings().stop().fadeTo(S.fade,0);
       }     
       function loop(){
         sI=setInterval( animate, S.wait+S.fade );
       }loop();      

       child.hover(function(e){
            return e.type==='mouseenter'? clearInterval(sI) : loop();   
       }).eq(S.startAt).show().siblings().hide();

    });

};
})(jQuery);

插件使用情况：

$(function(){ // DOM ready

  // $('#el1').cjwFader(); // Use default plugin settings

  $('#el1').cjwFader({     // Let's apply some custom stuff
    startAt : 1,
    fade : 1000,
    wait: 700
  });

});

Answer 2

以下是工作幻灯片：http://jsfiddle.net/6GTGU/7/

我稍微更新了HTML以从JS中删除初始化代码。您可以决定将其还原

<强> HTML

<div id="cjwSlider">
    <div style="background-color: #6495ed; z-index: 0;"></div>
    <div style="background-color: #62ed43; z-index: 1;"></div>
    <div style="background-color: #ed5943; z-index: 2;"></div>
</div>

我不得不删除大量的JS代码以解决问题。我认为目前的JS就是您可能需要的所有东西，而不需要回到原来的那个：

var cjwSlider = $('#cjwSlider');
var sliderItems = cjwSlider.children('div');

$(document).ready(function () {
    window.setInterval(function () {
        var maxValue = $('#cjwSlider').find('div').length - 1;
        var currentItem = sliderItems.filter(function () {
            return $(this).css('z-index') == maxValue;
        });

        currentItem.addClass("hiddenDiv").delay(1000).queue(function () {
            sliderItems.each(function (index) {
                $(this).css('z-index', parseInt($(this).css('z-index')) + 1);
            });

            currentItem.css('z-index', 0);
            currentItem.removeAttr('class');
            $(this).dequeue();
        });
    }, 4000);
});

问题的关键是在排队的函数末尾缺少对dequeue()的调用。该函数第一次执行正常，但随后停留在队列的头部并阻止执行稍后排队的函数。这就是为什么你的动画播放一个周期而不是之后。

JQuery Slider动画只发生一个周期

2 个答案: