0

我正在使用list_ticker 插件来滚动浏览一些列表元素。

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

感谢您的关注。

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>
4

1 回答 1

0

显然，这个插件中没有内置这样的功能。这里有两个选择：谷歌获得更高级的插件或快速而肮脏的补丁。

(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/

于 2013-04-24T15:00:01.730 回答