首页>>Jquery图片>>手动滚动,不可循环,演示带上下滚动的(2013-09-02)

手动滚动,不可循环,演示带上下滚动的

 本例与《左右滚动代码,手动滚动,可以设置每次滚动个数,适应性强》 的区别在于这个案例是不可以循环的.本例也可以很方便的改为上下手动滚动，效果是一样的，您可以点击这里查看垂直滚动.

本例的一些延伸案例，通过ajax加载

以及自动滚动无需手动控制

手动滚动,不可循环,演示带上下滚动的
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 本例代码比较简单

 

XML/HTML Code复制内容到剪贴板
  1. <ul id="mycarousel" class="jcarousel-skin-tango">   
  2.           <li><a href=""><img src="3.jpg" height="75" width="75" /></a></li>  
  3.           <li><a href=""><img src="1.jpg" height="75" width="75" /></a></li>  
  4.           <li><a href=""><img src="3.jpg" height="75" width="75" /></a></li>  
  5.           <li><a href=""><img src="2.jpg" height="75" width="75"/></a></li>  
  6.           <li><a href=""><img src="2.jpg" height="75" width="75" /></a></li>  
  7.           <li><a href=""><img src="1.jpg" height="75" width="75" /></a></li>  
  8.           <li><a href=""><img src="2.jpg" height="75" width="75" /></a></li>  
  9.           <li><a href=""><img src="1.jpg" height="75" width="75" /></a></li>  
  10.           <li><a href=""><img src="3.jpg" height="75" width="75" /></a></li>  
  11.           <li><a href=""><img src="1.jpg" height="75" width="75" /></a></li>  
  12.           <li><a href=""><img src="3.jpg" height="75" width="75" /></a></li>  
  13.           <li><a href=""><img src="2.jpg" height="75" width="75"/></a></li>  
  14.           <li><a href=""><img src="2.jpg" height="75" width="75" /></a></li>  
  15.           <li><a href=""><img src="1.jpg" height="75" width="75" /></a></li>  
  16.           <li><a href=""><img src="2.jpg" height="75" width="75" /></a></li>  
  17.           <li><a href=""><img src="1.jpg" height="75" width="75" /></a></li>  
  18. </ul>   

js和css代码

 

XML/HTML Code复制内容到剪贴板
  1. <script src="jquery.min.js"></script>  
  2. <!--  
  3. jCarousel library  
  4. -->   
  5. <script type="text/javascript" src="jquery.jcarousel.min.js"></script>   
  6. <!--  
  7. jCarousel skin stylesheet  
  8. -->   
  9. <link rel="stylesheet" type="text/css" href="skin.css" />   
  10.   
  11. <style type="text/css">   
  12.   
  13. /**   
  14. * Overwrite for having a carousel with dynamic width.   
  15. */   
  16. .jcarousel-skin-tango .jcarousel-container-horizontal {   
  17. width: 85%;   
  18. }   
  19.   
  20. .jcarousel-skin-tango .jcarousel-clip-horizontal {   
  21. width: 100%;   
  22. }   
  23.   
  24. </style>   
  25.   
  26. <script type="text/javascript">   
  27.   
  28. jQuery(document).ready(function() {   
  29. jQuery('#mycarousel').jcarousel({   
  30. visible: 7   
  31. });   
  32. });   
  33.   
  34. </script>   

 


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