一款基于jQuery底部带缩略图的焦点图
之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果。
在线预览 源码下载
实现的代码。
html代码:
- <div class="picbox">
- <div id="featured">
- <div class="image" id="image_pic-01">
- <img src="images/001.jpg">
- <div class="word">
- <h3>
- 标题一</h3>
- <p>
- 内容介绍</p>
- </div>
- </div>
- <div class="image" id="image_pic-02">
- <img class="full" src="images/002.jpg">
- <div class="word">
- <h3>
- 标题二</h3>
- <p>
- 内容介绍</p>
- </div>
- </div>
- <div class="image" id="image_pic-03">
- <img class="full" src="images/003.jpg">
- <div class="word">
- <h3>
- 标题三</h3>
- <p>
- 内容介绍</p>
- </div>
- </div>
- <div class="image" id="image_pic-04">
- <img class="full" src="images/004.jpg">
- <div class="word">
- <h3>
- 标题四</h3>
- <p>
- 内容介绍</p>
- </div>
- </div>
- <div class="image" id="image_pic-05">
- <img class="full" src="images/005.jpg">
- <div class="word">
- <h3>
- 标题五</h3>
- <p>
- 内容介绍</p>
- </div>
- </div>
- <div class="image" id="image_pic-06">
- <img class="full" src="images/006.jpg">
- <div class="word">
- <h3>
- 标题六</h3>
- <p>
- 内容介绍</p>
- </div>
- </div>
- <div class="image" id="image_pic-07">
- <img class="full" src="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="images/btn_prev.gif"></li>
- <li class="slideshowItem"><a id="thumb_pic-01" href="javascript:" class="current">
- <img src="images/001_1.jpg"></a></li>
- <li class="slideshowItem"><a id="thumb_pic-02" href="javascript:">
- <img src="images/002_1.jpg" width="78" height="37"></a></li>
- <li class="slideshowItem"><a id="thumb_pic-03" href="javascript:">
- <img src="images/003_1.jpg" width="78" height="37"></a></li>
- <li class="slideshowItem"><a id="thumb_pic-04" href="javascript:">
- <img src="images/004_1.jpg" width="78" height="37"></a></li>
- <li class="slideshowItem"><a id="thumb_pic-05" href="javascript:">
- <img src="images/005_1.jpg" width="78" height="37"></a></li>
- <li class="slideshowItem"><a id="thumb_pic-06" href="javascript:">
- <img src="images/006_1.jpg" width="78" height="37"></a></li>
- <li class="slideshowItem"><a id="thumb_pic-07" href="javascript:">
- <img src="images/007_1.jpg" width="78" height="37"></a></li>
- <li class="last btnNext">
- <img id="play_next" src="images/btn_next.gif"></li>
- </ul>
- <div class="clear">
- </div>
- </div>
- </div>
【一款基于jQuery底部带缩略图的焦点图】相关文章
本文来源:https://www.51html5.com/a1446.html
上一篇:jQuery全屏广告图片焦点图
下一篇:jQuery鼠标滑动切换焦点图
﹝一款基于jQuery底部带缩略图的焦点图﹞相关内容
- 一款基于jquery和css3的头像恶搞特效
- 一款基于jQuery的图片场景标注提示弹窗特效
- jQuery带暂停按钮的焦点图插件
- jQuery右侧Tab选项卡的焦点图插件
- jQuery可自动播放动画的焦点图插件
- jQuery带爆炸特效的焦点图动画
- 基于jQuery的网站首页宽屏焦点图幻灯片
- jQuery自动裁切图像产生缩略图Fakecrop
- jQuery垂直缩略图相册插件 支持鼠标滑动翻页
- 7款基于jquery实现web前端的源码特效