带倒影效果的jquery轮播图插件

置顶免费 9  1647

jinjing VIP3 2017-02-25

下载所需金币：0 收藏

简要教程

这是一款炫酷的带倒影效果的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">周杰伦粉丝版MVp>
        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>      