3D轮播demo
一个3D轮播demo,戳这里.
该轮播jQuery，除此之外只涉及到一个js文件和css文件，用普通方式引入即可。
<link rel="stylesheet" href="css/carousel.css"> ... <script src="js/libs/jquery.js"></script> <script src="js/carousel.js"></script>
然后，new一个VCarousel对象，传入相应参数。
<body> <div class="wrap"> <div id="app"></div> </div> </body> ... var vcarousel = new VCarousel({ wrap: $('#app'), data:[{ url: 'https://github.com/Rcong', img: 'http://7xrunf.com1.z0.glb.clouddn.com/rcong-img0.jpg' }, { url: 'https://github.com/Rcong', img: 'http://7xrunf.com1.z0.glb.clouddn.com/rcong-img1.jpg' }, { url: 'https://github.com/Rcong', img: 'http://7xrunf.com1.z0.glb.clouddn.com/rcong-img2.jpg' }, { url: 'https://github.com/Rcong', img: 'http://7xrunf.com1.z0.glb.clouddn.com/rcong-img3.jpg' }, { url: 'https://github.com/Rcong', img: 'http://7xrunf.com1.z0.glb.clouddn.com/rcong-img4.jpg' }] }); 实现思路
上图就是整个demo的结构图，整体有一个class为carousel的容器用来包裹class为img-list轮播图容器和class为switch-list的切换按钮容器。
设定carousel的宽度和高度，在这个demo中为高为194px，宽为765px，然后设置overflow: hidden隐藏内部超出部分。内部的img-list宽度设置和父容器一样长也为765px，高度设置为168px，并且设置position: relative，以便内部的img-item可以使用绝对定位来控制每一个的定位。
img-item内部包含一个img标签和一个class为img-modal的遮照层，img标签当然是用来展现图片的咯，当图片移动到左右两侧时会暗淡下来，img-modal就是用来实现这个效果的，当img-item在正面的时候img-modal的颜色为透明，而img-item移动到侧面时给img-modal的背景色设置为rgba(0, 0, 0, 0.3)。
内部结构说完了，再来说说布局，因为效果图上的三个图片之间是互相重叠的，并且最中间的是在最上层，所以我在这里没有采用设置margin-left为负值的方法，而采用了绝对定位，并且赋予不同的z-index。结构图中5个img-item都有一个涉及到z-index、opacity、left、transform的基本样式，然后根据位置的不同，又有left-img-item、prev-img-item、main-img-item、next-img-item、right-img-item等class添加到相应的img-item上，s使用不同属性来体现出各个img-item的差异，不同的img-item使用不同的left来作一个排列，而最左的img-item和最右的img-item透明度为0，中间三个img-item透明度为1，每一个img-item都设置transform中的perspective、rotateY、translateZ三个属性，perspective是控制视角的，rotateY是控制图片沿着Y轴旋转的，translateZ让图片产生大小的效果，推荐张鑫旭的好吧，CSS3 3D transform变换，不过如此！，具体参数不细说了，可以看样式文件，我这里也没有和网易云音乐中一样的标准，是在不停地微调中凑出来的。最后给图片设置个transition:all .8s;，这样在切换的时候就有过渡效果了。
至于switch-list没有什么需要特别的地方，就是个ul包着几个li，每个li修改下样式，成为灰色的小圆，然后有个选中的li加个switch-item-active，修改背景色。
接下来说下js部分，这里采用构造函数模式来封装。
function VCarousel(opts) { this.wrap = opts.wrap || $('body'); this.carousel = null; this.imgItems = null; this.switchItems = null; this.listSize = 0; //图片数量 this.mainImgItem = null, //对应正中的img-item this.prevImgItem = null, //对应左边的img-item this.nextImgItem = null, //对应右边的img-item this.leftImgItem = null, //对应最左边的img-item，隐藏看不见 this.rightImgItem = null, //对应最右边的img-item，隐藏看不见 this.mainSwitchItem = null; this.init(opts.data); } VCarousel.prototype = { init:function(data){ //初始化，根据数据添加dom节点，并给VCarousel中的属性赋值... }, bindEvent: function(){ //绑定事件，主要是点击每个图片时触发的事件和点击切换按钮时的事件... }, clearStyle:function(){ //清除样式，给几个特定位置的img-item清除特定样式... }, addStyle: function(){ //添加样式，给几个特定位置的img-item添加特定样式... }, switchItem:function(){ //切换img-item，也就是轮播中图片的方法... } }
类VCarousel的基本属性中包含了几个不同位置的img-item以及图片数量和当前的切换按钮等，当new一个VCarousel的时候需要传入相关参数，挂载的元素和数据，这里使用了jQuery，所以传入的是一个jQuery对象，在init方法中会根据传入的数据拼接DOM字符串并添加到相应节点，当添加的DOM渲染完成后去计算出添加的图片数量，并选出几个特殊位置的img-item初始化相应的样式，然后绑定事件，主要是点击每个图片时触发的事件和点击切换按钮时的事件，当切换时，会去删除原有几个特定位置img-item的特定样式，然后根据点击的img-item去重新确定排列在特定位置的各个img-item，再赋予各个特定样式，此前在css中已经添加了过渡效果，从而呈现出一个过渡动画。
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
