JQuery Slider动画只发生一个循环

JQuery Slider animation only happens for one cycle

本文关键字：一个 循环 Slider 动画 JQuery      更新时间：2023-09-26

我一直在尝试创建我自己的Javascript滑块插件（我意识到有很多，但我想把它当作一个学习练习），

这里可以看到一个例子：http://jsfiddle.net/6GTGU/

我遇到的问题是动画转了一圈，然后停了下来，我试着检查一下，看看我做错了什么，但我找不到任何原因，如果有人能帮助我，我将不胜感激。

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

PLUGIN DEMO IN ACTION

你说你想要一个插件，现在开始吧
它甚至在鼠标输入时停止（我个人讨厌仅仅悬停在图库上就无法阻止它。）
我根本不理解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
  });
});

以下是工作幻灯片：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就是你可能需要的，不需要回到你原来的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()的调用。该函数第一次执行得很好，但随后停留在队列的最前面，并阻止稍后执行排队的函数。这就是为什么您的动画播放了一个周期，但之后没有。

相关文章：