實戰練習2：js淘寶經典輪播圖

項目描述（需求分析）：javascript

一、使用原始JS實現淘寶輪播圖；css

二、用戶點擊左右按鈕時，圖片進行滑動；html

三、用戶點擊圓點時，顯示對應的圖片在輪播框內部，當前圖片對應當前遠點變爲高亮；java

四、圖片自動輪播；閉包

html部分：函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container">
        <div class="main">
            <img src="./images/5.jpg" alt="">
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
            <img src="./images/4.jpg" alt="">
            <img src="./images/5.jpg" alt="">
            <img src="./images/1.jpg" alt="">
        </div>
        <ul class="list">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="javascript:;" id="prev" class="btn"><</a>
        <a href="javascript:;" id="next" class="btn">></a>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

css部分：ui

body, ul, li, a{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
.container{
    position: relative;
    width: 520px;
    height: 280px;
    border: 10px solid #000;
    margin: 100px auto;
    overflow: hidden;
}
.main{
    position: absolute;
    left: -520px;
    width: 3640px;
    height: 280px;
    font-size: 0;
}
.list{
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -35px;
    font-size: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 7px;

}
.list li{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    margin: 3px;
    cursor: pointer;
}
.list .active {
    background: orangered;
}

.btn{
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
}
.container:hover .btn{
    display: inline-block;
}
#prev{
    left: 0;
}
#next{
    right: 0;
}

js部分：code

var oPrev = document.getElementById('prev'),
    oNext = document.getElementById('next'),
    oMain = document.getElementsByClassName('main')[0],
    oList = document.getElementsByClassName('list')[0],
    oLi = oList.getElementsByTagName('li'),
    oContainer = document.getElementsByClassName('container')[0];
var timer,timer2,
    oLiLength = oLi.length,
    index = 0,
    flag = true;
function moveImg(dis) {
    flag = false;
    var time = 400;//每次輪播須要的時間
    var eachTime = 20;//每一小次移動的時間
    var eachDis = dis/(time/eachTime);//每一小次滑動的距離
    var newLeft = oMain.offsetLeft + dis;
    //每一小次移動的函數
    function eachMove() {
        if(dis > 0 && oMain.offsetLeft < newLeft || dis < 0 && oMain.offsetLeft > newLeft) {
            oMain.style.left = oMain.offsetLeft + eachDis + 'px';
        }else {
            //清除計時器並強制挪到目標位置
            clearInterval(timer);
            oMain.style.left = newLeft + 'px';
            //若左側沒圖片，則定位到-2600位置
            //若右側沒圖片，則定位到-520的位置
            if(newLeft == -3120) {
                oMain.style.left = -520 + 'px';
            }
            if(newLeft == 0) {
                oMain.style.left = -2600 + 'px';
            }
            flag = true;
        }
    }
    //每一小次移動的計時器
    timer = setInterval(eachMove, eachTime);  
}

oPrev.onclick = function () {
    if(flag == false) return;
    moveImg(520);
    if(index == 0) {
        index = 4;
    }else {
        index--;
    } 
    oLiStyle();
}
oNext.onclick = function () {
    if(flag == false) return;
    moveImg(-520);
     
    if(index == 4) {
        index = 0;
    }else {
        index++;
    }  
    
    oLiStyle();
}
//清除並設置active
function oLiStyle() {
    oList.getElementsByClassName('active')[0].className = '';
    oLi[index].className = 'active';
}
//給小圓點li綁定點擊事件，執行樣式效果及輪播效果
for(var i = 0; i < oLiLength; i++) {
    //注意閉包
    (function (j) {
        oLi[j].onclick = function () {
            var offset = (j - index) * -520;
            moveImg(offset);
            index = j;
            oLiStyle();
        }
    })(i);   
}
//自動輪播
timer2 = setInterval(oNext.onclick, 2000);
oContainer.onmouseover = function () {
    clearInterval(timer2);
}
oContainer.onmouseout = function () {
    timer2 = setInterval(oNext.onclick, 2000);
}