使用jquery实现的循环连续可停顿滚动实例

使用jquery实现的循环连续可停顿滚动,并应用于滚动图片,滚动层。记得一定要有jquery库哦~

一、单行滚动

rush:js;"> 无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档 插件 (function($){ $.fn.extend({ Scroll:function(opt,callback){ //参数初始化 if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(),//获取行高 line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),//每次滚动的行数,认为一屏,即父容器高度 speed=opt.speed?parseInt(opt.speed,10):500,//卷动速度,数值越大,速度越慢(毫秒) timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒) if(line==0) line=1; var upHeight=0-line*lineH; //滚动函数 scrollUp=function(){ _this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); }); } //鼠标事件绑定 _this.hover(function(){ clearInterval(timerID); },function(){ timerID=setInterval("scrollUp()",timer); }).mouseout(); } }) })(jQuery); $(document).ready(function(){ $("#scrollDiv").Scroll({line:4,speed:500,timer:1000}); }); // -->

多行滚动演示:

  • 这是公告标题的第一行
  • 这是公告标题的第二行
  • 这是公告标题的第三行
  • 这是公告标题的第四行
  • 这是公告标题的第五行
  • 这是公告标题的第六行
  • 这是公告标题的第七行
  • 这是公告标题的第八行
  • 三、可控制向前向后的多行滚动

    rush:js;"> 无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档 irst"); var lineH=_this.find("li:first").height(),10):500; //卷动速度,数值越大,速度越慢(毫秒) timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒) if(line==0) line=1; var upHeight=0-line*lineH; //滚动函数 var scrollUp=function(){ _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定 _this.animate({ marginTop:upHeight },function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件 }); } //Shawphy:向下翻页函数 var scrollDown=function(){ _btnDown.unbind("click",scrollDown); for(i=1;i<=line;i++){ _this.find("li:last").show().prependTo(_this); } _this.css({marginTop:upHeight}); _this.animate({ marginTop:0 },function(){ _btnDown.bind("click",scrollDown); }); } //Shawphy:自动播放 var autoPlay = function(){ if(timer)timerID = window.setInterval(scrollUp,timer); }; var autoStop = function(){ if(timer)window.clearInterval(timerID); }; //鼠标事件绑定 _this.hover(autoStop,autoPlay).mouseout(); _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定 _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); } }) })(jQuery); $(document).ready(function(){ $("#scrollDiv").Scroll({line:4,timer:1000,up:"btn1",down:"btn2"}); }); // -->

    多行滚动演示:

  • 这是公告标题的第一行
  • 这是公告标题的第二行
  • 这是公告标题的第三行
  • 这是公告标题的第四行
  • 这是公告标题的第五行
  • 这是公告标题的第六行
  • 这是公告标题的第七行
  • 这是公告标题的第八行
  • 以上这篇使用jquery实现的循环连续可停顿滚动实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

    相关文章

    页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
    jQuery实时显示日期、时间 html: &lt;span id=&quot...
    jQuery 添加水印 &lt;script src=&quot;../../../.....
    中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
    1. 用Response.Write方法 代码如下: Response.Write(&q...
    Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...