原生js仿网易轮播图

Posted 2020-10-14

<!-- 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();
}