您的位置: 首页  >  IT文章  >  jquery 手动slide滑动焦点图 带数目字显示顺序

jquery 手动slide滑动焦点图 带数目字显示顺序

分类: IT文章 • 2023-12-15 08:36:37
jquery 手动slide滑动焦点图 带数字显示顺序

jquery 手动slide滑动焦点图 带数字显示顺序

 
jquery 手动slide滑动焦点图 带数目字显示顺序
演示

 

 

XML/HTML Code
  1. <div id="container">  
  2. <!-- slideshow images -->  
  3. <div class="slideshow">  
  4. <ul>  
  5. <li><img src="lemons/1.jpg" alt="lemon" /></li>  
  6. <li><img src="lemons/2.jpg" alt="lemon tea" /></li>  
  7. <li><img src="lemons/3.jpg" alt="splashing lemon" /></li>  
  8. <li><img src="lemons/4.jpg" alt="salad with lemon" /></li>  
  9. <li><img src="lemons/5.jpg" alt="lemonade!" /></li>  
  10. <li><img src="lemons/6.jpg" alt="sliced lemon" /></li>  
  11. <li><img src="lemons/7.jpg" alt="dripping lemon" /></li>  
  12. </ul>  
  13. </div>  
  14.   
  15. </div>  
  16. <!-- change image links -->   
  17. <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)">1</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1)">2</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2)">3</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(3)">4</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(4)">5</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(5)">6</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(6)">7</a> <br/>  
  18. <br/>  
  19.   
  20.   
  21. <script type="text/javascript">  
  22.             $(window).load(function () {  
  23.                 // start the slideshow  
  24.                 $('.slideshow').blinds();  
  25.             })  
  26. </script>   

 


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

相关推荐