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