首页>>焦点图>>jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换(2014-01-11)

jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换

包含2个扩展演示，全屏和全一页显示多个

jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="content">  
  2. <div class="border_box">  
  3. <div class="box_skitter box_skitter_large">  
  4. <ul>  
  5. <li><a href="#cube"><img src="images/example/001.jpg" class="cube" /></a>  
  6. <div class="label_text">  
  7. <p>cube</p>  
  8. </div>  
  9. </li>  
  10. <li><a href="#cubeRandom"><img src="images/example/002.jpg" class="cubeRandom" /></a>  
  11. <div class="label_text">  
  12. <p>cubeRandom</p>  
  13. </div>  
  14. </li>  
  15. <li><a href="#block"><img src="images/example/003.jpg" class="block" /></a>  
  16. <div class="label_text">  
  17. <p>block</p>  
  18. </div>  
  19. </li>  
  20. <li><a href="#cubeStop"><img src="images/example/004.jpg" class="cubeStop" /></a>  
  21. <div class="label_text">  
  22. <p>cubeStop</p>  
  23. </div>  
  24. </li>  
  25. </ul>  
  26. </div>  
  27. </div>  
  28. </div>  

 

JavaScript Code
  1. <script type="text/javascript" language="javascript">   
  2.         $(document).ready(function() {   
  3.             $('.box_skitter_large').skitter({   
  4.                 theme: 'clean',   
  5.                 numbers_align: 'center',   
  6.                 progressbar: true,    
  7.                 dots: true,    
  8.                 preview: true  
  9.             });   
  10.         });   
  11.     </script>  

 


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