带炫酷背景的自适应3D轮播图

一款带炫酷背景的自适应3D轮播图特效，可通过左右两边的箭头按钮来切换图片，无鼠标操作时则为自动轮播，每张图片都有一个对应的倒影效果，可以自定义图片的标题，不建议太长的标题内容。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件和jQuery库，代码如下：

<link type="text/css" rel="stylesheet" href="css/3d.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>

页面的body部分，需设置好轮播图和对应倒影的容器，代码如下：

<div class="box">
  <div class="box-con"> <span class="prev"></span> <span class="next"></span>
    <ul class="list">
    </ul>
  </div>
</div>
<canvas class="canvas"></canvas>

页面的底部，需引入必要的JS文件，图片设置在3ddata.js里面，代码如下：

<script type="text/javascript" src="js/canvas.js"></script> 
<script type="text/javascript" src="js/3ddata.js"></script> 
<script type="text/javascript" src="js/3d.js"></script>