成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小小幻燈片

anonymoussf / 2672人閱讀

摘要：上一篇說了瀑布流，今天說一下小小幻燈片的故事?；脽羝瑢W名又叫輪播。輪播原理這里先說一下基本原理吧，就是將圖片向左或向右移，然后接著顯示下一張，或者上一張。這里需要感謝一下愛編程提供的圖片接著重頭戲就是。用來標識當前的元素的序號。

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

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

簡單輪播

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

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

輪播原理

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

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

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


        
    
            
    • 
            
    • 
            
    • 
            
    • 
            
    •

這里就是通過ul包裹多個li實現(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;
            }
        }
    }
}

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

js原理解析

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

js部分：

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

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

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

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

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

對不起，嚇到大家了，我這里又寫了一個閉包。。。 當然，主要入口函數(shù)還是在return 后面。
order用來標識當前的元素的序號。 需要注意的是添加動畫監(jiān)聽的那一部分。我這里使用了一個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主要的功能就是檢測，你的瀏覽器到底支持哪一個動畫監(jiān)聽函數(shù)。 好，pass.
我們回到剛才的主函數(shù)nextExe. 接著，我們給current和next添加監(jiān)聽，監(jiān)聽函數(shù)先放著。 接著我們給current和next添加動畫(就是添加class). 就這樣。然后他會觸發(fā)監(jiān)聽函數(shù)。 這里就不過多介紹了， 唯一需要提及的就是，需要在后面對監(jiān)聽進行解綁，避免重復綁定。

廢話說完了。 直接看個實例吧。

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

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

update slider

好了，大部分內容我也差不多介紹完了。

說說輪播

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/78627.html

相關文章

  • 50行代碼搞定無限滑動幻燈片

    摘要：對，滑動式幻燈片的關鍵就在于隱藏。在條件里我們添加一個事件相當于滑動后的回掉，依賴這個事件在幻燈片滑動執(zhí)行完畢后立即執(zhí)行里面的閃回操作。通過添加事件監(jiān)聽滑動是否結束從而迅速閃回，達到貌似無限滑動的效果。 slider輪播組件，在各類網站上出現(xiàn)及其頻繁，有漸隱式的，滑動式的等等一系列。栗子在這: 但我當初學習寫輪播時卻被各種入門教程搞得焦頭爛額。不是代碼太復雜，就是封裝太嚴重，初學者很難...

    yimo 評論0 收藏0

  • 用impress.js制作幻燈片

    摘要：前兩天學長回學校進行洗腦宣講，做了一個看上去很炫的縮放式幻燈片?？梢杂萌缦碌姆椒ㄌ砑拥谝豁摰幕脽羝阈枰獙懙氖呛?。如果用戶剛點開幻燈片而沒反應，這個提示會自動浮現(xiàn)。雖然這些東西很簡單，但做一個演講使用的幻燈片，也已經足夠好了。 前兩天學長回學校進行洗腦宣講，做了一個看上去很炫的縮放式幻燈片。我不知道是不是太淺薄了，找了很久才找到幾個Web幻燈片工具?？戳藥讉€之后，我決定學習一下其中最G...

    noONE 評論0 收藏0

  • 【譯】Impress.js制作酷炫Presentation PPT

    摘要：由于是線上發(fā)布，所有有部分人問我怎么正確的使用它。因為沒有在實際的項目頁面設置幫助文檔。需求為了看到效果，請使用目前并不兼容早期的版本。第四張幻燈片來個新花樣，使用的值控制其縮放大小。 可以先看一個demo：http://dwqs.github.io/resume 昨天，我寫了一些關于Impress.js的東西，對于創(chuàng)建在線的自我展示，這是一個非常不錯的JavaScript庫。由于是...

    kviccn 評論0 收藏0

  • Java 插入html字符串到PPT幻燈片

    摘要：通過后端代碼操作幻燈片時，可直接在幻燈片中繪制形狀，并在形狀中添加文本字符串內容。本篇文章，介紹一種通過字符串來添加內容到幻燈片的的方法，可添加文字圖片視頻音頻等。通過方法將字符串添加到幻燈片。保存文檔幻燈片效果通過Java后端代碼操作PPT幻燈片時，可直接在幻燈片中繪制形狀，并在形狀中添加文本字符串內容。本篇文章，介紹一種通過html字符串來添加內容到PPT幻燈片的的方法，可添加文字、圖片...

    不知名網友 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<