需要帮助使用jQuery停止幻灯片放映

时间:2015-02-06 15:22:02

标签: javascript jquery

我遇到了jQuery代码的问题,我想要一些帮助。虽然下一个和上一个按钮正常工作,但似乎存在正确停止幻灯片放映的问题。这可能是我们完全忽略的,但我看不到是什么

控制台中没有显示任何JavaScript错误。正在达到中断方法 - 有一次我在那里进行了 console.log 调用以进行验证(已清理)出于演示原因)。

http://jsfiddle.net/eLn83ep0/

非常感谢您的帮助。

以下代码是prev / stop / start / next的功能:

      if ($(settings.next).size()) {

        $(settings.next).bind('click.scrollface', function (e) {
          methods.interrupt.call($this);
          methods.next.call($this);
        });

      }

      if ($(settings.pause).size()) {

        $(settings.pause).bind('click.scrollface', function (e) {
            methods.interrupt.call($this);
        });

      }
      if ($(settings.play).size()) {

        $(settings.play).bind('click.scrollface', function (e) {
          methods.interrupt.call($this);
          methods.start.call($this);
        });

      }

      /*
      * Setup up prev bindings
      */

      if ($(settings.prev).size()) {

        $(settings.prev).bind('click.scrollface', function (e) {
          methods.interrupt.call($this);
          methods.prev.call($this);
        });

      }

以下是中断的方法:

interrupt: function (time) {
  return $(this).each(function () {

    var data = $(this).data('scrollface');
    console.log(data);
    console.log('...');
    if (!data) {
      return false;
    }


    var $this = $(this),
    period    = 0;


    /*
    * Stop the timer, and wait a period of time before restarting it.
    * Period defaults to the timer interval
    */

    if (data.timer) {
      if (typeof time !== "number") {
        period = data.interval;
      } else {
        period = time;
      }

      methods.stop.call(this);

      setTimeout(function resume_timer () {
      clearInterval(data.timer);
      data.timer = null;
        methods.start.call($this);
      }, period);

    }

  });

},

1 个答案:

答案 0 :(得分:0)

  if ($(settings.pause).size()) {
        $(settings.pause).bind('click.scrollface', function (e)        
            methods.stop.call($this);               
        });

  }
  if ($(settings.play).size()) {
       $(settings.play).bind('click.scrollface', function (e) {
           methods.start.call($this);             
        });
  }

并删除prev和next中的中断调用

   //methods.interrupt.call(this);

因为中断方法停止了间隔方法并且在超时再次启动之后,所以大多数时间你暂停这个超时但是在这个超时后中断方法再次启动intervall并且不关心你是否手动停止它

查看您在此处更新的小提琴http://jsfiddle.net/7ko4rdda/

修改

如果你打电话给0中断按钮prev next click handler然后你有一个预期的行为,即intervall的周期在next / prev click之后开始新的

if ($(settings.prev).size()) {
    $(settings.prev).bind('click.scrollface', function (e) {
          methods.interrupt.call($this,0);
          methods.prev.call($this);
     });

}
if ($(settings.next).size()) {
     $(settings.next).bind('click.scrollface', function (e) {
          methods.interrupt.call($this,0);
          methods.next.call($this);
     });

}

http://jsfiddle.net/7ko4rdda/1/