原生JS实现滑动轮播图

实现原理

搭建基本界面

<div id="box">
            <img src="images/arrowleft.png" id="arrow-left">
            <img src="images/arrowright.png" id="arrow-right">
            <ul id="multi-circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="multi-images">
                <img src="images/1.jpg">
                <img src="images/2.jpg">
                <img src="images/3.jpg">
                <img src="images/4.jpg">
                <img src="images/5.jpg">
                <div class="clear"></div>
            </div>
        </div>

    #box {
    position:relative;
    width:var(--imageWidth);
    height:var(--height);
    overflow: hidden;
    }
    #multi-circles {
    position:absolute;
    right:30px;
    bottom:10px;
    z-index: 2;
    }
    #multi-images {
    position:absolute;
    left:0;
    top:0;
    z-index: 1;
    width:calc(var(--imageWidth)*5);
    height:var(--height);
    }
    #arrow-right,
    #arrow-left {
    position: absolute;
    top:50%;
    margin-top:-20px;
    height:40px;
    z-index: 3;
    }
    #arrow-right {
    right:0;
    }
    #arrow-left {
    left:0;
    }

确定图片序号

//先dom操作，获取html组件
var arrowLeft = document.getElementById("arrow-left");
var arrowRight = document.getElementById("arrow-right");
var multiImages = document.getElementById("multi-images");
var circles = document.getElementById("multi-circles").getElementsByTagName("li");
var box=document.getElementById("box");

//为箭头和圆点绑定事件
arrowLeft.addEventListener("click", preMove);
arrowRight.addEventListener("click", nextMove);
for (let i = 0; i < circles.length; i++) {
        circles[i].setAttribute("id", i);
        circles[i].addEventListener("mouseenter", overCircle);
}

//滑过圆点
function overCircle() {
    currentIndex = parseInt(this.id);
}
//左箭头
function preMove() {
    if (currentIndex != 0) {
        currentIndex--;
    }
    else {
        currentIndex = 4;
    }
}
//右箭头
function nextMove() {
    if (currentIndex != 4) {
        currentIndex++;
    }
    else {
        currentIndex = 0;
    }
}

滑动

function moveImage() {
    multiImages.style.left = -currentIndex * 400 + "px";
}

#multi-images {
     transition: 1s;
}

圆点颜色

function changeCircleColor(preIndex, currentIndex) {
    circles[preIndex].style.backgroundColor = "rgb(240, 240, 240)";
    circles[currentIndex].style.backgroundColor = "rgb(245, 40, 40)";
}

悬浮箭头

#arrow-right,
#arrow-left {
display:none;
}

box.addEventListener("mouseover",function() {
    arrowLeft.style.display="block";
    arrowRight.style.display="block";
});

#arrow-right,
#arrow-left {
cursor:pointer;
}

自动轮播

timer=setInterval(nextMove,2000);
box.addEventListener("mouseover",function() {
    clearInterval(timer);
});
box.addEventListener("mouseout",function() {
    timer=setInterval(nextMove,2000);
});

小插曲

ul,
li {
    list-style: none;
}

完整代码