首页>>Jquery图片>>带圆点的图片切换，包括手动和自动切换，一次展示多个滚动，缩略图等(2014-01-03)

带圆点的图片切换，包括手动和自动切换，一次展示多个滚动，缩略图等

 可以设置手动或者自动切换，有无显示缩略图，每次显示个数与滚动个数

带圆点的图片切换，包括手动和自动切换，一次展示多个滚动，缩略图等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <!-- BEGIN .wmuSlider -->  
  2. <div class="wmuSlider example1">  
  3. <div class="wmuSliderWrapper">  
  4. <article> <img src="../dalian.jpg" /> </article>  
  5. <article> <img src="../mohe.png" /> </article>  
  6. <article> <img src="../sanya.jpg" /> </article>  
  7. <article> <img src="../zhoushan.jpg" /> </article>  
  8. <article> <img src="../xianggang.jpg" /> </article>  
  9. <article> <img src="../zhoushan.jpg" /> </article>  
  10. </div>  
  11.   
  12. <!-- END .wmuSlider -->   
  13. </div>  
  14.   
  15. <!-- BEGIN .wmuSlider -->  
  16. <div class="wmuSlider example2">  
  17. <div class="wmuSliderWrapper">  
  18. <article> <img src="../dalian.jpg" /> </article>  
  19. <article> <img src="../mohe.png" /> </article>  
  20. <article> <img src="../sanya.jpg" /> </article>  
  21. <article> <img src="../zhoushan.jpg" /> </article>  
  22. <article> <img src="../xianggang.jpg" /> </article>  
  23. <article> <img src="../zhoushan.jpg" /> </article>  
  24. </div>  
  25.   
  26. <!-- END .wmuSlider -->   
  27. </div>  
  28.   
  29. <!-- BEGIN .wmuSlider -->  
  30. <div class="wmuSlider example3">  
  31. <div class="wmuSliderWrapper">  
  32. <article> <img src="../dalian.jpg" /> </article>  
  33. <article> <img src="../mohe.png" /> </article>  
  34. <article> <img src="../sanya.jpg" /> </article>  
  35. <article> <img src="../zhoushan.jpg" /> </article>  
  36. <article> <img src="../xianggang.jpg" /> </article>  
  37. <article> <img src="../zhoushan.jpg" /> </article>  
  38. </div>  
  39.   
  40. <!-- END .wmuSlider -->   
  41. </div>  
  42.   
  43. <!-- BEGIN .wmuGallery -->  
  44. <div class="wmuGallery example4">  
  45. <div class="wmuSlider">  
  46. <div class="wmuSliderWrapper">  
  47. <article> <img width="75" height="75" src="../dalian.jpg" data-src-full="../dalian.jpg" /> </article>  
  48. <article> <img width="75" height="75" src="../mohe.png" data-src-full="../mohe.png" /> </article>  
  49. <article> <img width="75" height="75" src="../sanya.jpg" data-src-full="../sanya.jpg" /> </article>  
  50. <article> <img width="75" height="75" src="../zhoushan.jpg" data-src-full="../zhoushan.jpg" /> </article>  
  51. <article> <img width="75" height="75" src="../xianggang.jpg" data-src-full="../xianggang.jpg" /> </article>  
  52. <article> <img width="75" height="75" src="../zhoushan.jpg" data-src-full="../zhoushan.jpg" /> </article>  
  53. </div>  
  54. </div>  
  55.   
  56. <!-- END .wmuGallery -->   
  57. </div>  
  58.   
  59. <!-- Scripts -->   
  60. <script type="text/javascript" src="modernizr.custom.min.js"></script>   
  61. <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script><script src="jquery.wmuSlider.js"></script>   
  62. <script src="jquery.wmuGallery.js"></script>   
  63. <script>  
  64.         $('.example1').wmuSlider();   
  65.            
  66.         $('.example2').wmuSlider({  
  67.             touch: true,  
  68.             animation: 'slide'  
  69.         });     
  70.           
  71.         $('.example3').wmuSlider({  
  72.             touch: Modernizr.touch,  
  73.             animation: 'slide',  
  74.             items: 2  
  75.         });  
  76.           
  77.         $('.example4').wmuGallery();  
  78.     </script>   
  79.   
  80. <!-- END body -->  

 


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