首页>>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. overflowhidden;  
  5. padding: 0 0 10px;  
  6. }  
  7. #slider1 .viewport {  
  8. floatleft;  
  9. width240px;  
  10. height125px;  
  11. overflowhidden;  
  12. positionrelative;  
  13. }  
  14. #slider1 .buttons {  
  15. backgroundurl("../images/buttons.png"no-repeat scroll 0 0 transparent;  
  16. displayblock;  
  17. margin30px 10px 0 0;  
  18. background-position: 0 -38px;  
  19. text-indent: -999em;  
  20. floatleft;  
  21. width39px;  
  22. height37px;  
  23. overflowhidden;  
  24. positionrelative;  
  25. }  
  26. #slider1 .next {  
  27. background-position: 0 0;  
  28. margin30px 0 0 10px;  
  29. }  
  30. #slider1 .disable {  
  31. visibilityhidden;  
  32. }  
  33. #slider1 .overview {  
  34. list-stylenone;  
  35. positionabsolute;  
  36. padding: 0;  
  37. margin: 0;  
  38. width240px;  
  39. left: 0 top: 0;  
  40. }  
  41. #slider1 .overview li {  
  42. floatleft;  
  43. margin: 0 20px 0 0;  
  44. padding1px;  
  45. height121px;  
  46. border1px solid #dcdcdc;  
  47. width236px;  
  48. }  

 


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