js___原生js輪播

原生js輪播

 

做爲一名前端工程師，手寫輪播圖應該是最基本掌握的技能，如下是我本身原生js寫的輪播，歡迎指點批評；

首先css代碼

a{text-decoration:none;color:#3DBBF5;}
            *{
                margin: 0;
                padding: 0;
            }
            .wrapper{
                width: 400px;
                height: 300px;
                margin: 100px auto;
            }
            #lunbo{
                position: relative;
                overflow: hidden;
            }
            #list{
                position: relative;
                white-space: nowrap; // 這塊用行元素模擬，因此才用該屬性，塊元素可修改這塊
            }
            #list span{
                display: inline-block;
                width: 400px;
                height: 300px;
                text-align: center;
                line-height: 300px;
                font-weight: bold;
                font-size: 100px;
                color: #fff;
            }
            #buttons{
                position: absolute;
                bottom: 0;
                text-align: center;
                width: 100%;
                height: 40px;
                line-height: 40px;
            }
            #buttons span{
                display: inline-block;
                width: 15px;
                height: 5px;
                background: #fff;
                margin: 0 10px;
                cursor: pointer;
                transition: all .5s;
            }
            #buttons span.on{
                height: 20px;
            }
            .arrow{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                font-size: 80px;
                font-weight: bold;
                color: #fff;
                opacity: .3;
                transition: all .5s;
            }
            .wrapper:hover .arrow{
                opacity: 1;
            }
            #prev{
                left: 10px;
            }
            #next{
                right: 10px;
            }

View Code

而後HTML代碼

<div class="wrapper">
            <div id="lunbo">
                <div id="list" style="left: -400px;">
                    <span style="background:yellow;">5</span><span style="background: red;">1</span><span style="background:black;">2</span><span style="background:green;">3</span><span style="background:blue;">4</span><span style="background:yellow;">5</span><span style="background: red;">1</span>
                </div>
                <div id="buttons">
                    <span index="1" class="on"></span>
                    <span index="2"></span>
                    <span index="3"></span>
                    <span index="4"></span>
                    <span index="5"></span>
                </div>
                <a href="javascript:;" id="prev" class="arrow">&lt;</a>
                <a href="javascript:;" id="next" class="arrow">&gt;</a>
            </div>
        </div>

View Code

最後js代碼

window.onload=function  () {
            var lunBo = document.getElementById("lunbo");
            var list = document.getElementById("list");
            var btn = document.getElementById("buttons").getElementsByTagName('span');
            var prev = document.getElementById("prev");
            var next = document.getElementById('next');
            var interval = 3000;
            var timer;
            var index = 1;
            var animated = false;
            for (var i=0;i<btn.length;i++) {  //按鈕加點擊事件
                btn[i].onclick=function  () {
                    if(this.className=='on') //若是是狀態按鈕直接返回節約資源
                    {
                        return
                    };
                    var myIndex =parseInt(this.getAttribute('index'));//獲取按鈕的index屬性值
                    var offset = -400*(myIndex-index);  //根據屬性值 計算偏移量
                    animate(offset)        //輪播動畫
                    index = myIndex;   // 改變索引值
                    showBtn();         //顯示狀態按鈕
                }
            }
            function showBtn () {  
                for (var i=0;i<btn.length;i++) {
                    btn[i].className='';    
                }
                btn[index-1].className='on';
            }
            prev.onclick=function  () {  //上一頁事件
                if (animated) {  //若是是動畫狀態 直接返回解決bug
                    return;
                }
                if (index==1) {    
                    index =btn.length;
                } else{
                    index-=1;
                }
                animate(400);   
                showBtn();
            }
            next.onclick=function  () {
                if (animated) {
                    return;
                }
                if (index==btn.length) {
                    index =1;
                } else{
                    index+=1;
                }
                animate(-400);
                showBtn();
            }
            function animate(offset) {
                animated = true;   //表示在動畫狀態
                var newLeft = parseInt(list.style.left) + offset; //計算新的left值
                var time = 400; //設置動畫總時間
                var interval = 10;  //動畫幀時間
                var speed = offset/(time/interval);  //每幀運動距離
                function go () { 
                    if ((speed>0 && parseInt(list.style.left)<newLeft) || (speed<0 && parseInt(list.style.left)>newLeft)) { //經過條件判斷到它是否還要繼續進行動畫
                        list.style.left = parseInt(list.style.left) + speed +'px';
                        setTimeout(go,interval) 
                    } else{
                        animated = false; //動畫狀態結束
                        list.style.left = newLeft + 'px'; //如今的位移
                        if (parseInt(list.style.left)<-2000) {   // 輔助假圖
                            list.style.left = -400 + 'px';
                        } else if( parseInt(list.style.left)>-400){
                            list.style.left = -2000 + 'px';
                        }
                    }
                }
                go();
            }
            function play () {  
                timer = setTimeout(function  () {
                    next.onclick();
                    play();
                },interval)
            }
            play();
            function stop () {
                clearTimeout(timer);
            }
            lunBo.onmouseover=stop;
            lunBo.onmouseout=play;
        }

 　　　　以上是全部代碼，歡迎指點交流！