首页>>Jquery图片>>超简单的jquery 左右滚动图片，箭头控制左右滚动(2013-12-28)

超简单的jquery 左右滚动图片，箭头控制左右滚动

超简单的jquery 左右滚动图片，箭头控制左右滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="slider1"> <a class="buttons prev" href="#">left</a>  
  2. <div class="viewport">  
  3. <ul class="overview">  
  4. <li><img src="images/picture6.jpg" /></li>  
  5. <li><img src="images/picture5.jpg" /></li>  
  6. <li><img src="images/picture4.jpg" /></li>  
  7. <li><img src="images/picture3.jpg" /></li>  
  8. <li><img src="images/picture2.jpg" /></li>  
  9. <li><img src="images/picture1.jpg" /></li>  
  10. </ul>  
  11. </div>  
  12. <a class="buttons next" href="#">right</a> </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         $(document).ready(function(){  
  3.             $('#slider1').tinycarousel();     
  4.         });  
  5.     </script>  

 

CSS Code
  1. /* Tiny Carousel */  
  2. #slider1 {  
  3. height: 1%;  
  4. overflow: hidden;  
  5. padding: 0 0 10px;  
  6. }  
  7. #slider1 .viewport {  
  8. float: left;  
  9. width: 240px;  
  10. height: 125px;  
  11. overflow: hidden;  
  12. position: relative;  
  13. }  
  14. #slider1 .buttons {  
  15. background: url("../images/buttons.png") no-repeat scroll 0 0 transparent;  
  16. display: block;  
  17. margin: 30px 10px 0 0;  
  18. background-position: 0 -38px;  
  19. text-indent: -999em;  
  20. float: left;  
  21. width: 39px;  
  22. height: 37px;  
  23. overflow: hidden;  
  24. position: relative;  
  25. }  
  26. #slider1 .next {  
  27. background-position: 0 0;  
  28. margin: 30px 0 0 10px;  
  29. }  
  30. #slider1 .disable {  
  31. visibility: hidden;  
  32. }  
  33. #slider1 .overview {  
  34. list-style: none;  
  35. position: absolute;  
  36. padding: 0;  
  37. margin: 0;  
  38. width: 240px;  
  39. left: 0 top: 0;  
  40. }  
  41. #slider1 .overview li {  
  42. float: left;  
  43. margin: 0 20px 0 0;  
  44. padding: 1px;  
  45. height: 121px;  
  46. border: 1px solid #dcdcdc;  
  47. width: 236px;  
  48. }  

 


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