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

最新推荐文章于 2021-01-13 00:59:15 发布

最新推荐文章于 2021-01-13 00:59:15 发布 · 199 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery实现的手动滑动焦点图示例，通过点击数字链接切换图片，适用于网页设计中的轮播图展示。

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

演示

   XML/HTML Code
  

   <div id="container">  
<!-- slideshow images -->  
<div class="slideshow">  
<ul>  
<li><img src="lemons/1.jpg" alt="lemon" /></li>  
<li><img src="lemons/2.jpg" alt="lemon tea" /></li>  
<li><img src="lemons/3.jpg" alt="splashing lemon" /></li>  
<li><img src="lemons/4.jpg" alt="salad with lemon" /></li>  
<li><img src="lemons/5.jpg" alt="lemonade!" /></li>  
<li><img src="lemons/6.jpg" alt="sliced lemon" /></li>  
<li><img src="lemons/7.jpg" alt="dripping lemon" /></li>  
</ul>  
</div>  
  
</div>  
<!-- change image links -->   
<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/>  
<br/>  
  
  
<script type="text/javascript">  
            $(window).load(function () {  
                // start the slideshow  
                $('.slideshow').blinds();  
            })  
</script>   

  