<!doctype html>
<html>
<head>
<title>html5带倒影3D图片叠加轮播切换js特效</title>
<meta name="keywords" content="图片叠加,图片轮播,图片切换,图片层叠,html5 3d,html5图片切换,焦点轮播图" />
<meta name="description" content="html5带倒影3D图片叠加轮播切换特效。" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<br>
<!--轮播图 开始 -->
<div class="main_banner">
<div class="main_banner_wrap">
<canvas id="myCanvas" width="150" height="150"></canvas>
<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="main_banner/big0020150102211033.jpg" alt="">
<p style="bottom:0">周杰伦粉丝版MV</p>
</li>
<li id="imgCard1">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/big0120150101183428.jpg" alt="">
<p>乐侃有声节目第二期</p>
</li>
<li id="imgCard2">
<a href=""><span style="opacity:0.4;" ></span></a>
<img src="main_banner/big0320150101183351.jpg" alt="">
<p>乐见大牌：”荣“耀之声，”维“我独尊</p>
</li>
<li id="imgCard3">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/big0420150101224343.jpg" alt="">
<p>王力宏四年心血结晶</p>
</li>
<li id="imgCard4">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/big0720150102210934.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>
<!--轮播图 结束 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h14947.shtml
