原生JS實現輪播+學前端的感受（防止走火入魔）

插件！插件！天天聽到有人求這個插件，那個插件的，當然，用第三方插件可以大幅提高開發效率，但作為新手，我還是喜歡自己來實現，主要是我有時間！今天我來給大家分享下用原生JS實現圖片輪播的寫法前輩們可以無視下麵這段廢話：在開始之前，先說下我學前端到現在的一點感受。到今天應該有兩個月左右了吧，基本每天 ...

插件！插件！天天聽到有人求這個插件，那個插件的，當然，用第三方插件可以大幅提高開發效率，但作為新手，我還是喜歡自己來實現，主要是我有時間！

今天我來給大家分享下用原生JS實現圖片輪播的寫法

前輩們可以無視下麵這段廢話：
在開始之前，先說下我學前端到現在的一點感受。到今天應該有兩個月左右了吧，基本每天6-10小時的學習時間，純自學，據說培訓不靠譜！本人目前的階段是只會三大件（HTML5、CSS3、javascript）,其它所有知識都還排在學習計劃後面....現在正處在迷茫期，不知道下麵該先學什麼了！不管了，先把三大件整溜一點再說吧，前輩們若有什麼好的建議，希望指點！

從HTML5到CSS3，一路過來，感覺前端挺簡單的，就有點信心滿滿，動力十足，接著學JS，以前學過C#、蘋果的swift，都是面向對象的強類型的語言，比較先進，不過我還是喜歡前端，所以轉到這裡來了，開始學JS也覺得挺容易的，就是感覺這門語言有點亂，跟別人不太一樣！而權威指南有些東西不容易弄明白，沒辦法，就多百度，多看別人對一些比如閉包、原型等概念的理解，慢慢的也就能掌握的7788了，到了這個階段，你也許已經慢慢的瞭解到，原來前端它包括很多東西！一堆的第三方類庫、框架等等，還有很多其它東西，總之，新名詞不斷的在你眼前冒出來，有的說這個要過時了，那個即將是主流，好亂！好亂！接下去我該怎麼走？先學什麼？後學什麼？

我目前就處在這個階段，有時候會連續兩天什麼都看不下去，也睡不著覺，心煩意亂，就是：走火入魔了！

我就想啊，我這是怎麼了？想不明白啊！算了，先休息下，鍛煉下身體吧！就去跑步，瞎逛！一邊思考：怎麼讓自己重新進入狀態！

後來我是這麼做的：給自己點糖吃！（自己先動手做一些比較簡單的實例）

我發現，這糖還真甜，我居然能做出來！成就感悠然而生，動力也就十足了！我就一個實例接著一個實例的寫，不懂、對API不熟悉就翻文檔（在看別人的代碼之前自己先寫，實在不會了再看），慢慢的，我感覺自己真的又回來了，開始步入正軌了！

我還特地看了下，目前大部分招前端的公司都需要什麼樣的人，然後重新給自己制定了學習計劃，當然，因為眼下我有時間，所以我想拿一段時間出來先鞏固下3大基礎，多練習，然後回頭再過一遍文檔，多瞭解它們的基本的、內在的原理！下一步不管學什麼，就容易上手的多了！同時，繼續多瞭解前端！多瞭解這個職業的前景和走向，就是給自己建立一個前端的世界觀，這樣，學起來才不會迷失方向！

至於該學哪些第三方類庫、框架，我目前也不知道，JQ過時了嗎？需不需學？我也不知道，也先不管了，就先玩玩原生吧！以後應該自然就知道了吧！

實戰開始，下麵是代碼和演示，寫法參考了這位前輩：仿QQ輪播圖
前輩的面向對象寫法，目前本人還學不來，我只會寫一些函數，呵呵！（圖片來自網路，也可自己切個300*200圖片來查看效果，點擊‘漸進漸出’按鈕開始）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        #slide{
            position: absolute;
            top: 100px;
            left: 50px;
            width: 300px;
            height: 200px;
            border: 1px solid gray;
        }
        #slide .blog-name{
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 25px;
            line-height: 25px;
            background-color: rgba(155,155,155,0.5);
            z-index: 4;
            cursor: pointer;
            text-indent: 3px;
        }
        #slide-nav{
            position: absolute;
            right: 5px;
            bottom: 5px;
            z-index: 5;
        }
        #slide-nav li{
            display: inline-block;
            width: 16px;
            text-align: center;
            line-height: 16px;
            border-radius: 5px;
            cursor: pointer;
            overflow:hidden;
        }
        #slide-nav li:hover,.selected{
            background-color: #336699;
            color: white;
        }
        .slide-content1{
            position: absolute;
            width: 300px;
            height: 200px;
            font-size: 0;
        }
        .slide-content1 a{
            position: absolute;
            cursor: pointer;
        }
        .slide-content1 a:visited{color: black;}
        #model-btn{
            position: absolute;
            top: -25px;
            font-size: 20px;
        }
    </style>
    <script>
        window.onload = function(){
            var sufuImageScrooller = function(){
                //幾個工具函數
                function show(img){
                    var id;
                    for ( var i = 0; i <= 21; i++) {
                        var op = i * 5;
                        id = setTimeout(function(e) {
                            setOpacity(img, e)
                        }.bind(this,op), i * 50);
                    }
                    clearTimeout(id);
                }
                function hide(img){
                    var id;
                    for ( var i = 0; i <= 21; i++) {
                        var op = 100 - i * 5;
                        id = setTimeout(function(e) {
                            setOpacity(img, e)
                        }.bind(this,op), i * 20);
                    }
                    clearTimeout(id);
                }
                function getById(id){
                    return document.getElementById(id);
                }
                function setOpacity(elem,level){
                    if(elem.filter){
                        elem.style.filter = "alpha(opacity=" + level + ")"; //相容IE
                    }else{
                        elem.style.opacity = level/100;
                    }
                }
                //(漸進漸出模式)主體函數
                function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){
                    //防止多次點擊模式選擇按鈕創建更多的li
                    if(getById('slide-nav').childElementCount !== 0){return}
                    //創建導航按鈕
                    var nav = [];
                    var targetIdext = 0; //保存圖片狀態信息
                    var cureentIdext = 0; //保存圖片狀態信息
                    var frag = document.createDocumentFragment();
                    for(var i=0;i<nums;i++){
                        nav[i] = frag.appendChild(document.createElement('li')); //appendChild方法會返回該li
                        nav[i].innerHTML = i+1;
                    }
                    getById(navId).appendChild(frag);
                    //初始化為顯示第一張圖片
                    var imgs = getById(imgContainerId).getElementsByTagName('a');
                    var info = getById(imgInfoId);
                    info.innerHTML = imgs[0].title.slice(0,12)+'...';
                    nav[0].className = 'selected'; //動態改變li的className來改變它的樣式
                    for(var j=1;j<nav.length;j++){
                        setOpacity(imgs[j],0);
                    }
                    //開始自動輪播
                    var id;
                    function start(delay){
                        id = setInterval(function(){
                            hide(imgs[cureentIdext]);
                            nav[cureentIdext].className = '';
                            if(targetIdext<nums-1){
                                targetIdext ++;
                            }else{
                                targetIdext = 0;
                            }
                            cureentIdext = targetIdext;
                            show(imgs[targetIdext]);
                            nav[targetIdext].className = 'selected';
                            info.innerHTML = imgs[targetIdext].title.slice(0,12)+'...';
                        },delay);
                    }
                    start(delay);
                    //為每個導航按鈕添加事件
                    for(var k=0;k<nav.length;k++){
                        nav[k].onclick = function(event){
                            var e = event||window.event; //相容IE
                            var t = event.target||event.srcElement; //相容IE
                            var idex = parseInt(t.innerHTML)-1;
                            console.log('idex:'+idex+' t:'+targetIdext+' c:'+cureentIdext);
                            if(idex === cureentIdext){return;}
                            hide(imgs[cureentIdext]);
                            nav[cureentIdext].className = '';
                            cureentIdext = idex;
                            show(imgs[idex]);
                            nav[idex].className = 'selected';
                            info.innerHTML = imgs[idex].title.slice(0,12)+'...';
                        }
                    }
                    getById(navId).onmouseover = function(){clearInterval(id)};
                    getById(navId).onmouseout = function(){start(delay)};
                }
                //從右向左模式函數
                function fromRightModel(nums,navId,imgContainerId,imgInfoId,delay){
                    alert('博主偷懶,忘記實現這個函數了!需要請留言!');
                }
                function fromTopModel(nums,navId,imgContainerId,imgInfoId,delay){
                    alert('博主偷懶,忘記實現這個函數了!需要請留言!');
                }
                return {
                    inOutModel: inOutModel,
                    fromRightModel: fromRightModel,
                    fromTopModel: fromTopModel,
                    getById: getById
                }
            }();
            sufuImageScrooller.getById('model-btn1').onclick = function(){
                    sufuImageScrooller.inOutModel(5,'slide-nav','slide-main','slide-info',3500);
            };
            sufuImageScrooller.getById('model-btn2').onclick = function(){
                sufuImageScrooller.fromRightModel(5,'slide-nav','slide-main','slide-info',3500);
            };
            sufuImageScrooller.getById('model-btn3').onclick = function(){
                sufuImageScrooller.fromTopModel(5,'slide-nav','slide-main','slide-info',3500);
            };
        };
    </script>
</head>
<body>

<a id="slide-info" class="blog-name" href="http://www.cnblogs.com/susufufu/" target="_blank">蘇福的博客</a>

</body>
</html>

一開始，先想，該怎麼實現：不就利用定時器改變圖片，過場改變圖片的opacity嗎？

一、html排版比較簡單：
`

 <ul id="slide-nav">
 </ul>

<div id="slide-main" class="slide-content1">
        <a class="a-img" title="" href="" target="_blank">
            <div>
                <img src="lg1.png">
            </div>
        </a>
        ...
</div>
...

`
slide-info用來顯示圖片標題，slide-nav是數字按鈕，slide-main就是圖片容器了，裡面放圖片鏈接，

二、CSS樣式的設置，只要你親自去體驗，就都能明白了，註意點：

自己佈局前，先最好把父元素加border，這樣一幕瞭然，最後再去掉
ul li 等很多標簽預設是有padding的，所有要把它設為0；
*{ margin: 0; padding: 0; list-style: none; text-decoration: none; }
height: 25px;和line-height: 25px;兩個相等，可以讓字居中
z-index只相對於你的兄弟和子輩，對於旁系的親戚無效，如果想讓它顯示在旁系的親戚前面，就設置旁系的親戚的祖先，比如你的爺爺是宰相，你的二爺是農民，那麼你們家所有人身份都比你二爺家的所有人的身份都尊貴
position: absolute;也是和他的父輩有關係的，父輩沒設置定位，靠不住啊，那就繼續往上找依靠，直到找到為止，然後依靠他來定位！
如果你要實現從右向左的效果，記住font-size:0;清楚圖片之間的間距，讓圖片肩並肩！

俗話說，熟能生巧，只有CSS基礎扎實，才能把控好佈局！比如下麵這個雙飛翼佈局，不需要定位就能實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .header,.footer{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: greenyellow;
        }
        .container{
            overflow: hidden;
            *zoom: 1;
        }
        .left{
            float: left;
            width: 100px;
            height: 100px;
            margin-left: -100%;
            background-color: green;
        }
        .main{
            float: left;
            width: 100%;
            height: 100px;
            background-color: gray;
        }
        .right{
            float: left;
            width: 200px;
            height: 100px;
            margin-left: -200px;
            background-color: gold;
        }
        .center{
            padding-left: 100px;
            padding-right: 200px;
        }
    </style>
</head>
<body>
header

main-center
    
    left
    right

footer
</body>
</html>

三、代碼的實現

先寫大綱:
var sufuImageScrooller = function(){
function getById(id){...} //通用獲取元素對象
function setOpacity(elem,level){...} //設置透明度
function hide(img){...} //淡入
function show(omg){...} //淡出
function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){ ... } //主函數體
return {
inOutModel: inOutModel,
...
}
}();

這樣的寫法就可以通過sufuImageScrooller來調用inOutModel方法了，sufuImageScrooller. inOutModel(5,'slide-nav','slide-main','slide-info',3500);

inOutModel(nums,navId,imgContainerId,imgInfoId,delay)參數：nums創建li數量，必須和圖片數量對應，navId數字按鈕容器id，imgContainerId圖片容器id，imgInfoId顯示圖片title信息id，delay指定切換圖片延遲時間；

大綱寫出來了，就完成了一大半了，其它就是具體細節代碼的實現了，我寫的不是很好，只能說實現了這個功能，大家自己琢磨，如果有好的建議歡迎提出；
從inOutModel函數開始切入，然後步步深入，關鍵在於動手打出來，光看的話體會沒那麼深刻！

好了，就介紹到這一步了，不會的自己多翻文檔API，也可留言問我