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

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

一、单行滚动

   
   
   
   
   
ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;}   
   
   
   
   
   
   
  
这是公告标题的第一行
   
  
这是公告标题的第二行
   
  
这是公告标题的第三行
   
  
这是公告标题的第四行
   
  
这是公告标题的第五行
   
  
这是公告标题的第六行
   
  
这是公告标题的第七行
   
  
这是公告标题的第八行
   
   
   
   
 

二、多行滚动 

   
   
   
   
   
ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;}   
   
   
   
   
多行滚动演示：
   
   
   
  
这是公告标题的第一行
   
  
这是公告标题的第二行
   
  
这是公告标题的第三行
   
  
这是公告标题的第四行
   
  
这是公告标题的第五行
   
  
这是公告标题的第六行
   
  
这是公告标题的第七行
   
  
这是公告标题的第八行
   
   
   
   

三、可控制向前向后的多行滚动  

   
   
   
   
   
ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;}   
   
   
   
   
多行滚动演示：
   
   
   
  
这是公告标题的第一行
   
  
这是公告标题的第二行
   
  
这是公告标题的第三行
   
  
这是公告标题的第四行
   
  
这是公告标题的第五行
   
  
这是公告标题的第六行
   
  
这是公告标题的第七行
   
  
这是公告标题的第八行
   
   
   
向前 向后   
   
 

以上这篇使用jquery实现的循环连续可停顿滚动实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。