js版本的轮播图-CSDN博客

本文链接：https://blog.csdn.net/m0_46139235/article/details/106885983

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<style>
*{
    list-style-type: none;
    padding: 0;
    margin: 0;
    
}
a{
    text-decoration: none;
    color:#000;
}
.box{
    width: 500px;
    height: 400px;
    border:3px solid #666;
    position: relative;
    margin: 50px auto;
}
.box ul{
    position:absolute;
    left:0;
    top:0;
    width: 500px;
    height: 400px;
}
.box ul li{
    display:none;
}
.box ul li.active{
    display:block;
}
ol{
    width: 60px;
    height: 20px;
    background:rgba(255,255,255,.7);
    border-radius:10px;
    position:absolute;
    bottom:20px;
    left:50%;
    margin-left:-30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

ol li{
    width: 10px;
    height: 10px;
    background-color: #666;
    border-radius:50%;
}
ol li.active{
    background-color: #f00;
}
.box>a{
    position:absolute;
    width: 24px;
    height: 40px;
    font-size:20px;
    text-align:center;
    line-height:40px;
    top:50%;
    margin-top:-12px;
    background:#eee;
}
.box>a.left{
    left:0;
}
.box>a.right{
    right:0;
}
</style>
<body>
<div class="box">
    <ul>
        <li class="active"><a href="#"><img src="images/1.jpg" width="500" height="400"></a></li>
        <li><a href="#"><img src="images/2.jpg" width="500" height="400"></a></li>
        <li><a href="#"><img src="images/3.jpg" width="500" height="400"></a></li>
    </ul>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ol>
    <a href="javascript:;" class="left">&lt;</a>
    <a href="javascript:;" class="right">&gt;</a>
</div>
</body>
<script type="text/javascript">
var index = 0; // 定义了一个下标 - 代表当前显示的li的下标
// 获取大盒子
var box = document.querySelector(".box");
// 获取右按钮
var r = box.querySelector("a.right");
// 获取所有ul中的li
var ulis = box.querySelectorAll("ul li");
// 获取ol下所有的li
var olis = box.querySelectorAll("ol li");
// 给右按钮绑定单击事件
r.onclick=function(){
    index++; // 每次点击让下标自增
    if(index==ulis.length){ // 限制下标最大值
        index=0;
    }
    // 将所有li的active干掉
    for(var i=0;i<ulis.length;i++){
        ulis[i].className = '';
        olis[i].className = '';
    }
    ulis[index].className = "active"; // 给当前这个li加上active类名
    olis[index].className = "active"; // 给当前这个li加上active类名
}
// 获取左按钮
var l = box.querySelector("a.left");
// 给左按钮绑定单击事件
l.onclick=function(){
    index--; // 每次点击让下标自增
    if(index<0){ // 限制下标最大值
        index=ulis.length-1;
    }
    // 将所有li的active干掉
    for(var i=0;i<ulis.length;i++){
        ulis[i].className = '';
        olis[i].className = '';
    }
    ulis[index].className = "active"; // 给当前这个li加上active类名
    olis[index].className = "active"; // 给当前这个li加上active类名
}
var timer;
// 自动轮播
timer = setInterval(function(){
    index++; // 每次点击让下标自增
    if(index==ulis.length){ // 限制下标最大值
        index=0;
    }
    // 将所有li的active干掉
    for(var i=0;i<ulis.length;i++){
        ulis[i].className = '';
        olis[i].className = '';
    }
    ulis[index].className = "active"; // 给当前这个li加上active类名
    olis[index].className = "active"; // 给当前这个li加上active类名
},1000);
// 鼠标移入大盒子停止自动轮播
box.onmouseenter=function(){
    clearInterval(timer);
}
// 鼠标移出自动轮播
box.onmouseleave=function(){
    // 自动轮播
    timer = setInterval(function(){
        index++; // 每次点击让下标自增
        if(index==ulis.length){ // 限制下标最大值
            index=0;
        }
        // 将所有li的active干掉
        for(var i=0;i<ulis.length;i++){
            ulis[i].className = '';
            olis[i].className = '';
        }
        ulis[index].className = "active"; // 给当前这个li加上active类名
        olis[index].className = "active"; // 给当前这个li加上active类名
    },1000);
}
// 底下小圆点的点击
for(let j=0;j<olis.length;j++){
    // olis[i].index = i;
    olis[j].onclick=function(){
        // index = this.index; // 将自己的下标找到赋值给index即可
        index = j;
        // console.log(index);
        // 将所有li的active干掉
        for(var i=0;i<ulis.length;i++){
            ulis[i].className = '';
            olis[i].className = '';
        }
        ulis[index].className = "active"; // 给当前这个li加上active类名
        olis[index].className = "active"; // 给当前这个li加上active类名
    }
}
</script>
</html>

总结：

 使用时：把  <li><a href="#"><img src="images/2.jpg" width="500" height="400"></a></li>
                     <li><a href="#"><img src="images/3.jpg" width="500" height="400"></a></li>
                     中的图片地址换成自己本地的就可以；