一款基于jQuery轮播切换焦点图,可播放多张图片

今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片，在这个组件中，你可以任意指定8张图片，然后插件就会帮你自动生成缩略图，并且自动开始切换播放图片。当然，你也可以手动切换图片，只要点击缩略图即可，这款jQuery轮播切换组件配置比较方便，唯一的不足就是只能指定8张图片，灵活性不强。效果图如下：



在线预览 源码下载

实现的代码。

html代码：

<div class="foucebox">
<div class="bd">
<div class="showDiv">
<a href="#">
<img src="images/1.jpg"></a>
<div class="foucebox_bg">
</div>
<div>
<h2 style="bottom: 60px;">
<a href="#">标题</a></h2>
<p style="bottom: 10px;">
简介</p>
</div>
</div>
<div class="showDiv">
<a href="#">
<img src="images/2.jpg"></a>
<div class="foucebox_bg">
</div>
<div>
<h2 style="bottom: 60px;">
<a href="#">标题</a></h2>
<p style="bottom: 10px;">
简介</p>
</div>
</div>
<div class="showDiv">
<a href="#">
<img src="images/3.jpg"></a>
<div class="foucebox_bg">
</div>
<div>
<h2 style="bottom: 60px;">
<a href="#">标题</a></h2>
<p style="bottom: 10px;">
简介</p>
</div>
</div>
<div class="showDiv">
<a href="#">
<img src="images/4.jpg"></a>
<div class="foucebox_bg">
</div>
<div>
<h2>
<a href="#">标题</a></h2>
<p style="bottom: 10px;">
简介</p>
</div>
</div>
<div class="showDiv">
<a href="#">
<img src="images/5.jpg"></a>
<div class="foucebox_bg">
</div>
<div>
<h2>
<a href="#">标题</a></h2>
<p style="bottom: 10px;">
简介</p>
</div>
</div>
<div class="showDiv">
<a href="#">
<img src="images/6.jpg"></a>
<div class="foucebox_bg">
</div>
<div>
<h2>
<a href="#">标题</a></h2>
<p style="bottom: 10px;">
简介</p>
</div>
</div>
<div class="showDiv">
<a href="#">
<img src="images/7.jpg"></a>
<div class="foucebox_bg">
</div>
<div>
<h2>
<a href="#">标题</a></h2>
<p style="bottom: 10px;">
简介</p>
</div>
</div>
<div class="showDiv">
<a href="#">
<img src="images/8.jpg"></a>
<div class="foucebox_bg">
</div>
<div>
<h2>
<a href="#">标题</a></h2>
<p style="bottom: 10px;">
简介</p>
</div>
</div>
</div>
<div class="hd">
<ul>
<li class="on"><a href="#">
<img src="images/1.1.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
class="mask"></span></a></li>
<li><a href="#">
<img src="images/1.2.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
class="mask"></span></a></li>
<li><a href="#">
<img src="images/1.3.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
class="mask"></span></a></li>
<li><a href="#">
<img src="images/1.4.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
class="mask"></span></a></li>
<li><a href="#">
<img src="images/1.5.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
class="mask"></span></a></li>
<li><a href="#">
<img src="images/1.6.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
class="mask"></span></a></li>
<li><a href="#">
<img src="images/1.7.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
class="mask"></span></a></li>
<li><a href="#">
<img src="images/1.8.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span
class="mask"></span></a></li>
</ul>
</div>
</div>

via:/article/1211328.html