这是一款炫酷的带倒影效果的jquery轮播图插件。该轮播图采用仿3D轮播切换图片方式,每张图片都有倒影效果,非常炫酷。
使用方法
在页面中引入style.css样式文件和jquery、main.js文件。
<link href="path/to/css/style.css" rel="stylesheet"> <script type="text/javascript" src="path/to/js/jquery.min.js"></script> <script type="text/javascript" src="path/to/js/main.js"></script>
HTML结构
该jquery轮播图的HTML结构如下:
<div class="main_banner"> <div class="main_banner_wrap"> <div class="main_banner_box" id="m_box"> <a href="javascript:void(0)" class="banner_btn js_pre"> <span class="banner_btn_arrow"><i></i></span> </a> <a href="javascript:void(0)" class="banner_btn btn_next js_next"> <span class="banner_btn_arrow"><i></i></span> </a> <ul> <li id="imgCard0"> <a href=""><span style="opacity:0;"></span></a> <img src="images/1.jpg" alt=""> <p style="bottom:0">周杰伦粉丝版MV</p> </li> <li id="imgCard1"> <a href=""><span style="opacity:0.4;"></span></a> <img src="images/2.jpg" alt=""> <p>乐侃有声节目第二期</p> </li> <li id="imgCard2"> <a href=""><span style="opacity:0.4;" ></span></a> <img src="images/3.jpg" alt=""> <p>乐见大牌:”荣“耀之声,”维“我独尊</p> </li> <li id="imgCard3"> <a href=""><span style="opacity:0.4;"></span></a> <img src="images/4.jpg" alt=""> <p>王力宏四年心血结晶</p> </li> <li id="imgCard4"> <a href=""><span style="opacity:0.4;"></span></a> <img src="images/5.jpg" alt=""> <p>MV精选:《武媚》女神团美艳大比拼</p> </li> </ul> <!--火狐倒影图层--> <p id="rflt"></p> <!--火狐倒影图层--> </div> <!--序列号按钮--> <div class="btn_list"> <span class="curr"></span><span></span><span></span><span></span><span></span> </div> </div> </div>