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中已经添加了过渡效果，从而呈现出一个过渡动画。

Rcong/Carousel

3D轮播Demo

如何使用

实现思路