右侧带缩略图和加载条的jQuery幻灯图片,我爱模
- 作者:我爱模版网
- 大小:0.481MB
- 点击次数:
- 发布时间:2014-02-14 14:09
特效介绍
右侧带缩略图和加载条的jQuery幻灯图片,兼容IE6,IE7,IE8,火狐等主流浏览器。
使用方法
1、依次引入 5imoban.css、jQuery脚本库 以及 5imoban.js 文件。2、将以下代码插入需要显示的区域即可。
<div id="showcase" class="cloud row-content showcase"> <div class="container"> <div class="slide" style="display:block; "> <div class="content-main-visual"> <a class="pc" href="http://www.5imoban.net" target="_blank"> <img src="images/img01.jpg"> </a> <a class="pc" href="http://www.5imoban.net" target="_blank"> <img src="images/img04.jpg"> </a> <a class="pc" href="http://www.5imoban.net" target="_blank"> <img src="images/img03.jpg"> </a> <a class="pc" href="http://www.5imoban.net" target="_blank"> <img src="images/img02.jpg"> </a> </div> <div class="content-main-feature"> <div class="feature green"> <a href="http://www.5imoban.net" class="current"> <img src="images/img01s.png"> <span> Acer 文件 </span> <div class="timerLine dark-green"> </div> <!-- 进度条 --> </a> </div> <div class="feature azure"> <a href="http://www.5imoban.net"> <img src="images/img04s.png"> <span> Acer 远程文件 </span> <div class="timerLine dark-azure"> </div> </a> </div> <div class="feature brick"> <a href="http://www.5imoban.net"> <img src="images/img03s.png"> <span> Acer 照片 </span> <div class="timerLine dark-brick"> </div> </a> </div> <div class="feature gray"> <a href="http://www.5imoban.net"> <img src="images/img02s.png"> <span> Acer 多媒体 </span> <div class="timerLine dark-gray"> </div> </a> </div> </div> </div> </div> </div>
- 本文标签:
- jQuery幻灯图片,加载条,缩略图