小小幻灯片

上一篇说了瀑布流，今天说一下小小幻灯片的故事。

幻灯片学名又叫 轮播。应该算是一种最常用的页面展示信息。以前由于ie6/7的拖累，导致我们只能使用，很古老的方式去兼容。(我最爱的css3啊~~~)。不过今年真的是前端的幸福年，各种 polyfill 和 shim，而且现在各大公司已经对ie6/7不予理睬，直接给他一个提醒页面(老子让你用ie6/7)。而且IE的爸爸，ms已经表态了，我当初是怎么生下你来的，太tm丑了，由于开放二胎，ms已经孵化了edge(原名斯巴达)，现在基本上是前端的黄金时代了。这里我主要介绍一种比较实用的轮播效果。

简单轮播

轮播，在各大网站都是使用，比如在淘宝首页(兼容性比较好), 网易云音乐首页等等。 可以说，写轮播应该算是前端的一个必修课程吧。 我这里就挑一个最简单的实现。

这里实现轮播的技术，主要依赖与css3，js只是作为一个切换class名的作用(只要不写js都简单)。

轮播原理

这里先说一下基本原理吧， 就是将图片 向左或向右移，然后接着显示下一张，或者上一张。

特么，逗我呢。你不说我也知道哎喂。

咳咳~
我们来看一下，html部分吧。

<div class="sliderCon">
        <ul>
            <li class="current"><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/1.jpg" alt=""></li>
            <li><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/2.jpg" alt=""></li>
            <li><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/3.jpg" alt=""></li>
            <li><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/4.jpg" alt=""></li>
            <li><img src="http://www.w2bc.com/demo/201510/2015-10-20-html5-css3-focus-change/img/5.jpg" alt=""></li>
        </ul>
    </div>

这里就是通过ul包裹多个li实现的轮播。(这里需要感谢一下爱编程提供的图片)

接着重头戏就是css3。
看~

.sliderCon {
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    ul {
        display: inline-block;
        position: relative;
        width: 450px;
        padding: 0;
        perspective: 1400px;
        li {
            width: 450px;
            height: 290px;
            position: absolute;
            list-style: none;
            top: 0;
            left: 0;
            opacity: 0;
            pointer-events: none;
            z-index: 1000;
            text-align: center;
            &.navOutNext {
                animation: rotate3DSlideOutLeft 0.3s forwards;
            }
            &.navInNext {
                animation: rotate3DSlideInRight 0.3s 0.1s forwards;
            }
            &.navOutPre{
                 animation: rotate3DSlideOutLeft 0.3s forwards;
            }
            &.navInPre{
                 animation: rotate3DSlideInRight 0.3s forwards;
            }
            &.current {  
                opacity: 1;
                pointer-events: auto;
                z-index: 1000;
            }
        }
    }
}

我这里只贴出主要部分的。 其实，贴出来根本没用，需要结合js来看。

js原理解析

好吧，我继续贴哈。

js部分：

var slider = (function() {
    var order = 0,
        lis = $('.sliderCon li');
    var toggle = (function() { //通过flag来进行切换
        var current,
            next,
            isAnimated = false, //标识是否正在执行动画
            mark = 0, //用来表示多个动画是否都结束
            len = lis.length - 1; //获得总的图片框
        var changeState = function() {
            mark++;
            if (mark === 2) {
                isAnimated = false;
                mark = 0;
            }
        }
        var nextExe = (function() {
            var setCurrentAnimate = function() {
                this.removeEventListener(transitionName, setCurrentAnimate);
                this.classList.remove("current");
                this.classList.remove("navOutNext");
                changeState(); //检测是否动画都执行完整
            }
            var setNextAnimate = function() {
                this.removeEventListener(transitionName, setNextAnimate);
                this.classList.add("current");
                this.classList.remove('navInNext');
                changeState();
            }
            return function() {
                var current = lis[order];
                order = order + 1 > len ? 0 : order + 1;
                var next = lis[order]; //获取下一个元素
                if (!transitionName) {
                    alert("你浏览器怎么这么垃圾，赶紧换一个吧");
                } else {
                    current.addEventListener(transitionName, setCurrentAnimate);
                    next.addEventListener(transitionName, setNextAnimate);
                }
                current.classList.add('navOutNext'); //开始执行动画
                next.classList.add('navInNext');
            }
        })();
        var preExe = (function(){
            var setCurrentAnimate = function() {
                this.removeEventListener(transitionName, setCurrentAnimate);
                this.classList.remove("current");
                this.classList.remove("navOutPre");
                changeState(); //检测是否动画都执行完整
            }
            var setPreAnimate = function(){
                this.removeEventListener(transitionName, setPreAnimate);
                this.classList.add("current");
                this.classList.remove("navInPre");
                changeState(); //检测是否动画都执行完整
            }
            return function(){
                var current = lis[order];
                order = order-1<0 ? len: order-1;
                 var pre = lis[order];  //获得下一个切换的元素
                if (!transitionName) {
                    alert("你浏览器怎么这么垃圾，赶紧换一个吧");
                } else {
                    current.addEventListener(transitionName, setCurrentAnimate);
                    pre.addEventListener(transitionName, setPreAnimate);
                }
                current.classList.add('navOutPre'); //开始执行动画
                pre.classList.add('navInPre');
            }
        })();
        return function(flag) { //入口函数
            if (isAnimated) return; //如果正在执行动画则退出
            isAnimated = true; //标识正在执行动画
            if (flag === "next") {
                nextExe();
            }else if(flag==="pre"){
                preExe();
            }
        }
    })();
    setInterval(function() {
        toggle("pre");
    }, 1000);
})();

由于我过度的使用了闭包和高阶函数，所以看起来会有点累哈。不急，同样，一个程序我们先找入口函数。
可以看出。入口函数就是toggle(就是使用return 的那部分)；

 return function(flag) { //入口函数
            if (isAnimated) return; //如果正在执行动画则退出
            isAnimated = true; //标识正在执行动画
            if (flag === "next") {
                nextExe();
            }else if(flag==="pre"){
                preExe();
            }
        }

isAnimated只是个标识符，用来表示是否正在执行动画。通过传入的flag来表示向前切换还是向后切换。如果向后接环则执行nextExe函数。好，我们来看一下nextExe函数。

切换动画函数

var nextExe = (function() {
            var setCurrentAnimate = function() {
                this.removeEventListener(transitionName, setCurrentAnimate);
                this.classList.remove("current");
                this.classList.remove("navOutNext");
                changeState(); //检测是否动画都执行完整
            }
            var setNextAnimate = function() {
                this.removeEventListener(transitionName, setNextAnimate);
                this.classList.add("current");
                this.classList.remove('navInNext');
                changeState();
            }
            return function() {
                var current = lis[order];
                order = order + 1 > len ? 0 : order + 1;
                var next = lis[order]; //获取下一个元素
                if (!transitionName) {
                    alert("你浏览器怎么这么垃圾，赶紧换一个吧");
                } else {
                    current.addEventListener(transitionName, setCurrentAnimate);
                    next.addEventListener(transitionName, setNextAnimate);
                }
                current.classList.add('navOutNext'); //开始执行动画
                next.classList.add('navInNext');
            }
        })();

对不起，吓到大家了，我这里又写了一个闭包。。。 当然，主要入口函数还是在return 后面。
order用来标识当前的元素的序号。 需要注意的是添加动画监听的那一部分。我这里使用了一个tricks(from moderniz)，我贴出来吧。

动画支持检测

var transitionName = (function() {

    var t;

    var el = document.createElement('fakeelement');

    //其实使用animated完全可以取代transition
    var transitions = {
        //这里是aniamted事件
        'WebkitAnimation': 'webkitAnimationEnd',
        'OAnimation': 'oAnimationEnd',
        'msAnimation': 'MSAnimationEnd',
        'animation': 'animationend'
            //下面是transition事件
            // 'transition':'transitionend',

        // 'OTransition':'oTransitionEnd',

        // 'MozTransition':'transitionend',

        // 'WebkitTransition':'webkitTransitionEnd',

        // 'MsTransition':'msTransitionEnd'

    }


    for (t in transitions) {

        if (el.style[t] !== undefined) {

            return transitions[t];

        }

    }

})();

其实这个IIFE主要的功能就是检测，你的浏览器到底支持哪一个动画监听函数。 好，pass.
我们回到刚才的主函数nextExe. 接着，我们给current和next添加监听，监听函数先放着。 接着我们给current和next添加动画(就是添加class). 就这样。然后他会触发监听函数。 这里就不过多介绍了， 唯一需要提及的就是，需要在后面对监听进行解绑，避免重复绑定。

废话说完了。 直接看个实例吧。

slider实例
这应该算是最原始的轮播。 接着我们可以在上面加上一些我们想要的功能。这里我加上了一些比较常用的，比如，轮播标识符，左右翻页。

由于比较简单，我这里直接把实例贴出来。其实主要的干货就是最原始的轮播，其余的都是花花草草。

update slider

好了，大部分内容我也差不多介绍完了。

说说轮播

上面基本上把简单轮播的原理介绍一遍，虽说低版本的SB IE可能会不支持。 但这个主要取决于你产品leader的规范，如果他要求是ie9+那么你使用这个应该问题不大，就是需要处理一下动画结束事件的支持。如果甚者需要将ie8考虑进来，那么，这个应该使用css的基本属性，而不能使用css3,或者直接使用js进行改变。还是那句话，站在你的角度去造一个unique轮子，就是最好的学习。