<!-- HTML部分 -->
<div id="wrap">
    <div class="picBox">    <!-- 圖片區域 -->
        <div id="pic">
            <div><a href="#"><img src="imgs/1.jpg" alt=""/></a></div>
            <div><a href="#"><img src="imgs/2.jpg" alt=""/></
 
a></div>
            <div><a href="#"><img src="imgs/3.jpg" alt=""/></a></div>
            <div><a href="#"><img src="imgs/4.jpg" alt=""/></a></div>
            <div><a href="#"><img src="imgs/5.jpg" alt=""/></a></div
 
>
        </div>
    </div>
    <div id="ctrl">    <!-- 按鈕控制區域 -->
        <span class="ctrlPrev"><</span>
        <span class="ctrlNext">></span>
    </div>
</div>

/* CSS部分 */
* {margin: 0;padding: 0;}
img {vertical-align: top;}
#wrap {width
 
: 576px;height: 374px;margin: 150px auto;position: relative;overflow: hidden;}
.picBox {width: 576px;height: 324px;}
#pic {width: 1152px;height: 324px;}
#pic div {position: absolute;top: 0;left: 0;width: 576px;height: 324px;}
#pic div img{width: 100%;}
#ctrl {text-align: center;padding-top: 5px;}
.ctrlList {width: 24px;height: 5px;display: inline-block;background:#e4e4e4;margin: 0 5px;cursor: pointer;text-indent: 10em;overflow: hidden;}
.active {background: #7bbedf!important;}
.ctrlPrev,.ctrlNext {position: absolute;top: 35%;font-size:50px;color:#fff;line-height: 42px;width: 40px;height: 50px;opacity: 0.8;cursor: pointer;}
.ctrlPrev {left: 0;}
.ctrlNext {right: 0;}

// JS部分
function $(id) {
    return document.getElementById(id);
}

var aPic = $("pic").children;    //獲取圖片的個數
var disX = $("wrap").offsetWidth;    //獲取大盒子的寬度，即圖片要走的寬度
var aSpan = $("ctrl").children;    //獲取按鈕的個數

for (var i = 1; i < aPic.length; i++) {
    aPic[i].style.left = disX + "px";    //除了第一張，其他圖片默認在大盒子之外
}

for (var i = 0; i < aPic.length; i++) {    //自動生成小按鈕
    var span = document.createElement("span");    //創建span元素
    span.className = "ctrlList";
    span.innerHTML = aPic.length - i;       //添加序號
    $("ctrl").insertBefore(span, aSpan[1]);    //添加到#ctrl內
}

aSpan[1].className = "ctrlList active";    //第一個按鈕默認選中

var index = 0;    //建立索引

for (var k in aSpan) {    //遍歷按鈕
    aSpan[k].onclick = function () {
        if (this.className == "ctrlPrev") {    //點擊上一張
            move(aPic[index], disX)    //當前張右移出大盒子
            --index < 0 ? index = aPic.length - 1 : index;    //先運算後判斷index是否大於圖片長度 是則等於長度
            aPic[index].style.left = -disX + "px";    //下一張直接移動到大盒子左邊
            move(aPic[index], 0)    //下一張左移進大盒子
            active();
        } else if (this.className == "ctrlNext") {    //點擊下一張
            autoPlay();
        } else {    //點擊小按鈕
            var newIndex = this.innerHTML - 1;    //建立新索引匹配序號
            if (index < newIndex) {    //當前索引小於被點擊索引號
                move(aPic[index], -disX)    //當前張左移出大盒子
                aPic[newIndex].style.left = disX + "px";    //下一張直接移動到大盒子右邊
            } else if (index > newIndex) {    //當前索引大於被點擊索引號
                move(aPic[index], disX)    //當前張右移出大盒子
                aPic[newIndex].style.left = -disX + "px";    //下一張直接移動到大盒子左邊
            }
            move(aPic[newIndex], 0)    //下一張移進大盒子
            index = newIndex;    //當前索引賦值給舊索引
            active();
        }
    }
}

var timer = null;
timer = setInterval(autoPlay, 2000);    //添加定時器

$("wrap").onmouseover = function () {    //鼠標移入關閉定時器
    clearInterval(timer);
}

$("wrap").onmouseout = function () {    //鼠標移出開啟定時器
    timer = setInterval(autoPlay, 2000);
}

function active() {    //小按鈕選中
    for (var i = 1; i < aSpan.length - 1; i++) {
        aSpan[i].className = "ctrlList";
    }
    aSpan[index + 1].className = "ctrlList active";
}

function move(obj, left) {    //移動動畫
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (left - obj.offsetLeft) / 8;    //步長
        step = step > 0 ? Math.ceil(step) : Math.floor(step);    //處理小數除不凈
        obj.style.left = obj.offsetLeft + step + "px";
        if (obj.offsetLeft == left) {
            clearInterval(obj.timer);
        }
    }, 30)
}

function autoPlay() {    //自動播放 等同於點擊下一張
    move(aPic[index], -disX)    //當前張左移出大盒子
    ++index > aPic.length - 1 ? index = 0 : index;    //先運算後判斷index是否大於圖片長度 是則等於0
    aPic[index].style.left = disX + "px";    //下一張直接移動到大盒子右邊
    move(aPic[index], 0)    //下一張右移進大盒子
    active();
}

原生js仿網易輪播圖