一款基于jQuery底部带缩略图的焦点图

之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果。

一款基于jQuery底部带缩略图的焦点图

在线预览   源码下载

实现的代码。

html代码:

 <div class="picbox">
<div id="featured">
<div class="image" id="image_pic-01">
<img src="data:images/001.jpg">
<div class="word">
<h3>
标题一</h3>
<p>
内容介绍</p>
</div>
</div>
<div class="image" id="image_pic-02">
<img class="full" src="data:images/002.jpg">
<div class="word">
<h3>
标题二</h3>
<p>
内容介绍</p>
</div>
</div>
<div class="image" id="image_pic-03">
<img class="full" src="data:images/003.jpg">
<div class="word">
<h3>
标题三</h3>
<p>
内容介绍</p>
</div>
</div>
<div class="image" id="image_pic-04">
<img class="full" src="data:images/004.jpg">
<div class="word">
<h3>
标题四</h3>
<p>
内容介绍</p>
</div>
</div>
<div class="image" id="image_pic-05">
<img class="full" src="data:images/005.jpg">
<div class="word">
<h3>
标题五</h3>
<p>
内容介绍</p>
</div>
</div>
<div class="image" id="image_pic-06">
<img class="full" src="data:images/006.jpg">
<div class="word">
<h3>
标题六</h3>
<p>
内容介绍</p>
</div>
</div>
<div class="image" id="image_pic-07">
<img class="full" src="data:images/007.jpg">
<div class="word">
<h3>
标题七</h3>
<p>
内容介绍</p>
</div>
</div>
</div>
<div id="thumbs">
<ul>
<li class="first btnPrev">
<img id="play_prev" src="data:images/btn_prev.gif"></li>
<li class="slideshowItem"><a id="thumb_pic-01" href="javascript:" class="current">
<img src="data:images/001_1.jpg"></a></li>
<li class="slideshowItem"><a id="thumb_pic-02" href="javascript:">
<img src="data:images/002_1.jpg" width="78" height="37"></a></li>
<li class="slideshowItem"><a id="thumb_pic-03" href="javascript:">
<img src="data:images/003_1.jpg" width="78" height="37"></a></li>
<li class="slideshowItem"><a id="thumb_pic-04" href="javascript:">
<img src="data:images/004_1.jpg" width="78" height="37"></a></li>
<li class="slideshowItem"><a id="thumb_pic-05" href="javascript:">
<img src="data:images/005_1.jpg" width="78" height="37"></a></li>
<li class="slideshowItem"><a id="thumb_pic-06" href="javascript:">
<img src="data:images/006_1.jpg" width="78" height="37"></a></li>
<li class="slideshowItem"><a id="thumb_pic-07" href="javascript:">
<img src="data:images/007_1.jpg" width="78" height="37"></a></li>
<li class="last btnNext">
<img id="play_next" src="data:images/btn_next.gif"></li>
</ul>
<div class="clear">
</div>
</div>
</div>

via:http://www.w2bc.com/Article/15948

上一篇:mac系统及xcode使用的SVN客户端安装升级


下一篇:查看linux版本号的几种方法