Question

我正在尝试将自动推进添加到我自己编写的jquery插件中。滑块有下一个和上一个按钮。

我创建了点击模拟功能

  var autoAdvance = function(){
    $('#next').trigger('click');
  };

如果auto设置为true ，我希望autoAdvance函数触发;如果单击控件（下一个和上一个按钮），我希望停止。此部分 - 停止自动前进 - 无法正常工作

if(settings.auto === true){ setInterval(autoAdvance, settings.pause); // Stop auto advance if controls are clicked $('.controlls a').on('click', function(){ clearInterval(autoAdvance); }); };

我哪里错了？谢谢！

Answer 1

尝试这样的事情：

var interval;
if(settings.auto === true){
   interval = setInterval(autoAdvance, settings.pause);
   // Stop auto advance if controls are clicked 
   $('.controlls a').on('click', function(){
     clearInterval(interval);  
   });
};

如果您可以创建一些jsFiddle来检查它，那将是完美的，但无论如何请尝试我的答案。

Answer 2

setInterval部分应该如下所示

settings.intervalHandler = setInterval(autoAdvance, settings.pause);
...
clearInterval(settings.intervalHandler);

并且 - 也许

controlls - 可能错字？
如果代码运行多次，则settings.auto仍为真

Answer 3

这是我提出的工作解决方案，用于每隔n毫秒在“下一步”按钮上模拟一次点击，并在发生真实点击时停止自动前进：

  // Auto advance
  if(settings.auto === true){

    var autoAdvanceInterval = null;

    $(window).load(function(){
      autoAdvanceInterval = setInterval(function(){
        $('#next').trigger('click');  
      }, settings.pause);
      // When a control or dot is clicked by user
      // stop autoadvance by clearInterval method 
      $('.controls a,.bullets li').click( function(event) {
        if (event.originalEvent !== undefined) {
          clearInterval(autoAdvanceInterval);
        }
      });
    });
  }

Answer 4

$(document).ready(function(){
  
  var autoInterval = null;
  var settings ={};
  settings.auto = true;
  settings.pause = 2000; //3 sec
  $('.message span').fadeOut();
  
  var autoAdvance = function(){
    $('.next').data("auto", true);
    $('.next').trigger('click');
  };
  
  
  autoInterval = setInterval(autoAdvance, 5000);
    // Stop auto advance if controls are clicked 
  $('.next').on('click', function(){
    
    $('.message span').fadeIn(400).delay( 1000 ).fadeOut(400);
    var isAuto = $('.next').data("auto");
    if(isAuto !==true){
      clearInterval(autoInterval);
      $('.message span').fadeIn();
    }
    
    $('.next').data("auto",false);
  });
  
  
});

.message{
  min-height:50px;
  min-width:100px;
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="message"><span>clicked</span></div>
<button class="next">Next</button>

自定义Jquery插件自动提前错误

4 个答案: