首页>>焦点图>>带倒影 自动轮播图(2020-03-13)

带倒影 自动轮播图

带倒影 自动轮播图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="main_banner">  
  2.     <div class="main_banner_bg"></div>  
  3.     <div class="main_banner_wrap">  
  4.         <canvas id="myCanvas" width="0" height="0"></canvas>  
  5.         <div class="main_banner_box" id="m_box">  
  6.             <a href="javascript:void(0)" class="banner_btn js_pre">  
  7.                 <span class="banner_btn_arrow"><i></i></span>  
  8.             </a>  
  9.             <a href="javascript:void(0)" class="banner_btn btn_next js_next">  
  10.                 <span class="banner_btn_arrow"><i></i></span>  
  11.             </a>  
  12.             <ul>  
  13.                 <li id="imgCard0">  
  14.                     <a href=""><span style="opacity:0;"></span></a>        
  15.                     <img src="main_banner/big0020150102211033.jpg" alt="">  
  16.                     <p style="bottom:0">周杰伦粉丝版MV</p>  
  17.                 </li>   
  18.                 <li id="imgCard1">  
  19.                     <a href=""><span style="opacity:0.4;"></span></a>        
  20.                     <img src="main_banner/big0120150101183428.jpg" alt="">  
  21.                     <p>乐侃有声节目第二期</p>  
  22.                 </li>   
  23.                 <li id="imgCard2">  
  24.                     <a href=""><span style="opacity:0.4;" ></span></a>          
  25.                     <img src="main_banner/big0320150101183351.jpg" alt="">  
  26.                     <p>乐见大牌：”荣“耀之声，”维“我独尊</p>  
  27.                 </li>   
  28.                 <li id="imgCard3">  
  29.                     <a href=""><span style="opacity:0.4;"></span></a>        
  30.                     <img src="main_banner/big0420150101224343.jpg" alt="">  
  31.                     <p>王力宏四年心血结晶</p>  
  32.                 </li>   
  33.                 <li id="imgCard4">  
  34.                     <a href=""><span style="opacity:0.4;"></span></a>        
  35.                     <img src="main_banner/big0720150102210934.jpg" alt="">  
  36.                     <p>MV精选：《武媚》女神团美艳大比拼</p>  
  37.                 </li>   
  38.             </ul>  
  39.             <!--火狐倒影图层-->  
  40.             <p id="rflt"></p>  
  41.             <!--火狐倒影图层-->  
  42.         </div>  
  43.         <!--序列号按钮-->  
  44.         <div class="btn_list">  
  45.             <span class="curr"></span><span></span><span></span><span></span><span></span>          
  46.         </div>  
  47.     </div>  
  48. </div>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_841.html