新闻滚动

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dingyuanxin/p/4120297.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery实现的自定义滚动插件，该插件通过点击上一页和下一页按钮来滚动列表项，同时提供了对不同屏幕尺寸的支持。

//新闻滚动
(function($) {
  $.fn.myScroll = function(options) {
    var opts = $.extend(true, {},
    $.fn.myScroll.defaults, options);
    return this.each(function() {
        var $this = $(this);
        var $li=$this.find("li"),
            li_len=$li.length,
            li_height=$li.outerHeight(),
            page_li_len=Math.floor($this.height()/li_height),
            page=Math.ceil(li_len/page_li_len),
            scrollHeight=li_height*(page_li_len),
            li_width=$li.width(),
            index=0;
        var slideFunc=function(){
            if(index>=page){index=0;}else if(index<=-1){index=page-1;}
            console.log(index);
            $this.find("ul").animate({marginTop:-index*scrollHeight});
            };
        $this.find(".prev").on("click",function(){
            index=index-1;
            slideFunc();
        });
        $this.find(".next").on("click",function(){
            index=index+1;
            slideFunc();
        });
    });
  };
  $.fn.myScroll.defaults = {
  };
})(jQuery);