Question

我使用list_ticker plugin滚动浏览一些列表元素。

我想知道当鼠标悬停在它上面时是否有可能暂停自动收报机，这样用户就有时间阅读内容了（这只是几个单词，但它们包含了某个人可能想要记录的日期和时间的）。

感谢您的光临。

jQuery函数：

/* List Ticker by Alex Fish 
// www.alexefish.com
//
// options:
//
// effect: fade/slide
// speed: milliseconds
*/

(function($){
  $.fn.list_ticker = function(options){

    var defaults = {
      speed:4000,
      effect:'slide'
    };

    var options = $.extend(defaults, options);

    return this.each(function(){

      var obj = $(this);
      var list = obj.children();
      list.not(':first').hide();

      setInterval(function(){

        list = obj.children();
        list.not(':first').hide();

        var first_li = list.eq(0)
        var second_li = list.eq(1)

        if(options.effect == 'slide'){
            first_li.slideUp();
            second_li.slideDown(function(){
                first_li.remove().appendTo(obj);
            });
        } else if(options.effect == 'fade'){
            first_li.fadeOut(function(){
                second_li.fadeIn();
                first_li.remove().appendTo(obj);
            });
        }
      }, options.speed)
    });
  };
})(jQuery);

使用Javascript：

$(document).ready(function() {
    $('#next-ex').list_ticker({
        speed: 6000,
        effect: 'fade'
    });
});

HTML：

<ul id='next-ex'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Answer 1

显然，此插件中没有内置此类功能。这里有两个选项：谷歌更高级的插件或快速和脏修补。

(function($){
  $.fn.list_ticker = function(options){

    var defaults = {
      speed:4000,
      effect:'slide'
    };

    var options = $.extend(defaults, options);

    return this.each(function(){

      var obj = $(this);
      var list = obj.children();
      var stopped = false; //flag if we should stop ticking
      list.not(':first').hide();

        obj.hover( function(){ //adding hover behaviour
            stopped = true;
        }, function(){
            stopped = false;
        });


      setInterval(function(){
          if(stopped) {return;} //Quick check inside interval

        list = obj.children();
        list.not(':first').hide();

        var first_li = list.eq(0)
        var second_li = list.eq(1)

        if(options.effect == 'slide'){
            first_li.slideUp();
            second_li.slideDown(function(){
                first_li.remove().appendTo(obj);
            });
        } else if(options.effect == 'fade'){
            first_li.fadeOut(function(){
                second_li.fadeIn();
                first_li.remove().appendTo(obj);
            });
        }
      }, options.speed)
    });
  };
})(jQuery);

工作示例http://jsfiddle.net/tarabyte/8zLuY/

是否可以在mouseenter上暂停jQuery list_ticker插件？

1 个答案: