小小幻燈片

anonymoussf 發(fā)布于2019-08-19 17:33 / 2644人閱讀

摘要：上一篇說了瀑布流，今天說一下小小幻燈片的故事。幻燈片學(xué)名又叫輪播。輪播原理這里先說一下基本原理吧，就是將圖片向左或向右移，然后接著顯示下一張，或者上一張。這里需要感謝一下愛編程提供的圖片接著重頭戲就是。用來標(biāo)識(shí)當(dāng)前的元素的序號(hào)。

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

幻燈片學(xué)名又叫輪播。應(yīng)該算是一種最常用的頁(yè)面展示信息。以前由于ie6/7的拖累，導(dǎo)致我們只能使用，很古老的方式去兼容。(我最愛的css3啊~~~)。不過今年真的是前端的幸福年，各種 polyfill 和 shim，而且現(xiàn)在各大公司已經(jīng)對(duì)ie6/7不予理睬，直接給他一個(gè)提醒頁(yè)面(老子讓你用ie6/7)。而且IE的爸爸，ms已經(jīng)表態(tài)了，我當(dāng)初是怎么生下你來的，太tm丑了，由于開放二胎，ms已經(jīng)孵化了edge(原名斯巴達(dá))，現(xiàn)在基本上是前端的黃金時(shí)代了。這里我主要介紹一種比較實(shí)用的輪播效果。

簡(jiǎn)單輪播

輪播，在各大網(wǎng)站都是使用，比如在淘寶首頁(yè)(兼容性比較好), 網(wǎng)易云音樂首頁(yè)等等。可以說，寫輪播應(yīng)該算是前端的一個(gè)必修課程吧。我這里就挑一個(gè)最簡(jiǎn)單的實(shí)現(xiàn)。

這里實(shí)現(xiàn)輪播的技術(shù)，主要依賴與css3，js只是作為一個(gè)切換class名的作用(只要不寫js都簡(jiǎn)單)。

輪播原理

這里先說一下基本原理吧，就是將圖片向左或向右移，然后接著顯示下一張，或者上一張。

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

咳咳~
我們來看一下，html部分吧。

這里就是通過ul包裹多個(gè)li實(shí)現(xiàn)的輪播。(這里需要感謝一下愛編程提供的圖片)

接著重頭戲就是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;
            }
        }
    }
}

我這里只貼出主要部分的。其實(shí)，貼出來根本沒用，需要結(jié)合js來看。

js原理解析

好吧，我繼續(xù)貼哈。

js部分：

var slider = (function() {
    var order = 0,
        lis = $(".sliderCon li");
    var toggle = (function() { //通過flag來進(jìn)行切換
        var current,
            next,
            isAnimated = false, //標(biāo)識(shí)是否正在執(zhí)行動(dòng)畫
            mark = 0, //用來表示多個(gè)動(dòng)畫是否都結(jié)束
            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(); //檢測(cè)是否動(dòng)畫都執(zhí)行完整
            }
            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]; //獲取下一個(gè)元素
                if (!transitionName) {
                    alert("你瀏覽器怎么這么垃圾，趕緊換一個(gè)吧");
                } else {
                    current.addEventListener(transitionName, setCurrentAnimate);
                    next.addEventListener(transitionName, setNextAnimate);
                }
                current.classList.add("navOutNext"); //開始執(zhí)行動(dòng)畫
                next.classList.add("navInNext");
            }
        })();
        var preExe = (function(){
            var setCurrentAnimate = function() {
                this.removeEventListener(transitionName, setCurrentAnimate);
                this.classList.remove("current");
                this.classList.remove("navOutPre");
                changeState(); //檢測(cè)是否動(dòng)畫都執(zhí)行完整
            }
            var setPreAnimate = function(){
                this.removeEventListener(transitionName, setPreAnimate);
                this.classList.add("current");
                this.classList.remove("navInPre");
                changeState(); //檢測(cè)是否動(dòng)畫都執(zhí)行完整
            }
            return function(){
                var current = lis[order];
                order = order-1<0 ? len: order-1;
                 var pre = lis[order];  //獲得下一個(gè)切換的元素
                if (!transitionName) {
                    alert("你瀏覽器怎么這么垃圾，趕緊換一個(gè)吧");
                } else {
                    current.addEventListener(transitionName, setCurrentAnimate);
                    pre.addEventListener(transitionName, setPreAnimate);
                }
                current.classList.add("navOutPre"); //開始執(zhí)行動(dòng)畫
                pre.classList.add("navInPre");
            }
        })();
        return function(flag) { //入口函數(shù)
            if (isAnimated) return; //如果正在執(zhí)行動(dòng)畫則退出
            isAnimated = true; //標(biāo)識(shí)正在執(zhí)行動(dòng)畫
            if (flag === "next") {
                nextExe();
            }else if(flag==="pre"){
                preExe();
            }
        }
    })();
    setInterval(function() {
        toggle("pre");
    }, 1000);
})();

由于我過度的使用了閉包和高階函數(shù)，所以看起來會(huì)有點(diǎn)累哈。不急，同樣，一個(gè)程序我們先找入口函數(shù)。
可以看出。入口函數(shù)就是toggle(就是使用return 的那部分)；

 return function(flag) { //入口函數(shù)
            if (isAnimated) return; //如果正在執(zhí)行動(dòng)畫則退出
            isAnimated = true; //標(biāo)識(shí)正在執(zhí)行動(dòng)畫
            if (flag === "next") {
                nextExe();
            }else if(flag==="pre"){
                preExe();
            }
        }

isAnimated只是個(gè)標(biāo)識(shí)符，用來表示是否正在執(zhí)行動(dòng)畫。通過傳入的flag來表示向前切換還是向后切換。如果向后接環(huán)則執(zhí)行nextExe函數(shù)。好，我們來看一下nextExe函數(shù)。

切換動(dòng)畫函數(shù)

var nextExe = (function() {
            var setCurrentAnimate = function() {
                this.removeEventListener(transitionName, setCurrentAnimate);
                this.classList.remove("current");
                this.classList.remove("navOutNext");
                changeState(); //檢測(cè)是否動(dòng)畫都執(zhí)行完整
            }
            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]; //獲取下一個(gè)元素
                if (!transitionName) {
                    alert("你瀏覽器怎么這么垃圾，趕緊換一個(gè)吧");
                } else {
                    current.addEventListener(transitionName, setCurrentAnimate);
                    next.addEventListener(transitionName, setNextAnimate);
                }
                current.classList.add("navOutNext"); //開始執(zhí)行動(dòng)畫
                next.classList.add("navInNext");
            }
        })();

對(duì)不起，嚇到大家了，我這里又寫了一個(gè)閉包。。。當(dāng)然，主要入口函數(shù)還是在return 后面。
order用來標(biāo)識(shí)當(dāng)前的元素的序號(hào)。需要注意的是添加動(dòng)畫監(jiān)聽的那一部分。我這里使用了一個(gè)tricks(from moderniz)，我貼出來吧。

動(dòng)畫支持檢測(cè)

var transitionName = (function() {

    var t;

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

    //其實(shí)使用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];

        }

    }

})();

其實(shí)這個(gè)IIFE主要的功能就是檢測(cè)，你的瀏覽器到底支持哪一個(gè)動(dòng)畫監(jiān)聽函數(shù)。好，pass.
我們回到剛才的主函數(shù)nextExe. 接著，我們給current和next添加監(jiān)聽，監(jiān)聽函數(shù)先放著。接著我們給current和next添加動(dòng)畫(就是添加class). 就這樣。然后他會(huì)觸發(fā)監(jiān)聽函數(shù)。這里就不過多介紹了，唯一需要提及的就是，需要在后面對(duì)監(jiān)聽進(jìn)行解綁，避免重復(fù)綁定。

廢話說完了。直接看個(gè)實(shí)例吧。

slider實(shí)例
這應(yīng)該算是最原始的輪播。接著我們可以在上面加上一些我們想要的功能。這里我加上了一些比較常用的，比如，輪播標(biāo)識(shí)符，左右翻頁(yè)。

由于比較簡(jiǎn)單，我這里直接把實(shí)例貼出來。其實(shí)主要的干貨就是最原始的輪播，其余的都是花花草草。

update slider

好了，大部分內(nèi)容我也差不多介紹完了。

說說輪播

上面基本上把簡(jiǎn)單輪播的原理介紹一遍，雖說低版本的SB IE可能會(huì)不支持。但這個(gè)主要取決于你產(chǎn)品leader的規(guī)范，如果他要求是ie9+那么你使用這個(gè)應(yīng)該問題不大，就是需要處理一下動(dòng)畫結(jié)束事件的支持。如果甚者需要將ie8考慮進(jìn)來，那么，這個(gè)應(yīng)該使用css的基本屬性，而不能使用css3,或者直接使用js進(jìn)行改變。還是那句話，站在你的角度去造一個(gè)unique輪子，就是最好的學(xué)習(xí)。