特效介绍
右侧带缩略图和加载条的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>