首页>>Jquery图片>>jquery垂直向上逐条滚动新闻列表 支持图片与文字滚动(2019-03-29)

jquery垂直向上逐条滚动新闻列表 支持图片与文字滚动

jquery垂直向上逐条滚动新闻列表 支持图片与文字滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function() {  
  3.     $(".demo1").jCarouselLite({  
  4.         vertical: true,  
  5.         hoverPause:true,  
  6.         visible: 3,  
  7.         auto:2000,  
  8.         speed:1500  
  9.     });  
  10.       
  11.     $(".demo2").jCarouselLite({  
  12.         vertical: true,  
  13.         hoverPause:true,  
  14.         visible: 3,  
  15.         auto:3000,  
  16.         speed:1500  
  17.     });  
  18. });  
  19. </script>  

 

XML/HTML Code
  1. <div class="demo1">  
  2.     <ul>  
  3.       <li>  
  4.         <div class="thumbnail"> <img src="images/1.jpg"> </div>  
  5.         <div class="info"> <a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a></div>  
  6.         <div class="clear"></div>  
  7.       </li>  
  8.       <li>  
  9.         <div class="thumbnail"> <img src="images/2.jpg"> </div>  
  10.         <div class="info"> <a href="http://www.freejs.net/fenye.html">分页</a></div>  
  11.         <div class="clear"></div>  
  12.       </li>  
  13.       <li>  
  14.         <div class="thumbnail"> <img src="images/3.jpg"> </div>  
  15.         <div class="info"> <a href="http://www.freejs.net/jquerywenzi.html">Jquery文字</a></div>  
  16.         <div class="clear"></div>  
  17.       </li>  
  18.       <li>  
  19.         <div class="thumbnail"> <img src="images/1.jpg"> </div>  
  20.         <div class="info"> <a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a></div>  
  21.         <div class="clear"></div>  
  22.       </li>  
  23.       <li>  
  24.         <div class="thumbnail"> <img src="images/2.jpg"> </div>  
  25.         <div class="info"> <a href="http://www.freejs.net/fenye.html">分页</a></div>  
  26.         <div class="clear"></div>  
  27.       </li>  
  28.       <li>  
  29.         <div class="thumbnail"> <img src="images/3.jpg"> </div>  
  30.         <div class="info"> <a href="http://www.freejs.net/jquerywenzi.html">Jquery文字</a></div>  
  31.         <div class="clear"></div>  
  32.       </li>  
  33.     </ul>  
  34.   </div>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_739.html