上一次写轮播应该是500天前咯。。。。。。

html样式

<div class="box">
    <!-- 焦点图 -->
    <div class="focus">
        <ul>
            <li>
                <img id="img" src="./src/ldh1.jpg" alt="转存失败，建议直接上传图片文件">
            </li>
        </ul>
        <div class="change">
            <!-- 上一页 -->
            <div class="prev">＜</div>
            <!-- 下一页 -->
            <div class="next">＞</div>
        </div>
        <!-- 小圆圈 -->
        <div class="dotted">
            <ul>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>

            </ul>
        </div>
    </div>
</div>

css样式

  <style>
* {
    padding: 0px;
    margin: 0px;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 800px;

}

.box .focus {
    width: 900px;
    /* height: 700px; */
    /* background-color: aqua; */
    position: relative;
    /* background-color: aquamarine; */
}

.box .focus img {
    width: 100%;
    /* height: 0%; */
}

.focus .prev {
    position: absolute;
    left: 0;
    top: 250px;
    color: aquamarine;
    font-size: 50px;
}
.focus .next {
    position: absolute;
    right: 0;
    top: 250px;
    color: aquamarine;
    font-size: 50px;
    cursor: alias;
}
.dotted {
    position: absolute;
    bottom: 30px;
    width: 30%;
    /* height: 10%; */
    /* background-color:beige; */
    bottom: px;
    left: 50%;
    transform: translate(-50%);
}
.dotted ul {
    display: flex;
    justify-content: space-evenly;
}
.dotted ul li {
    font-size: 50px;
    color: aliceblue;
}
.dotted .current {
    color: aquamarine;
}

js样式

     const imgList = [
    "./src/ldh1.jpg",
    "./src/ldh2.jpg",
    "./src/zxy.jpg",
    "./src/zxy1.jpg",
    "./src/cyx.jpg",
    "./src/zgr.jpg"
]
const NowImg = document.getElementById("img")
const Box = document.querySelector(".focus")
const Prev = document.querySelector(".prev")
const Next = document.querySelector(".next")
const LittleLi = document.querySelectorAll(".dotted ul li")
console.log(LittleLi)
let index = 0;
Next.addEventListener("click", NextPic)

function NextPic() {
    if (index == imgList.length - 1) {
        index = 0
    } else {
        index++;
    }
    document.querySelector(".dotted .current").classList.remove("current")
    LittleLi[index].classList.add("current")
    NowImg.src = imgList[index]
}

Prev.addEventListener("click", function () {
    console.log(NowImg)
    // console.log(imgList.length)
    if (index == 0) {
        index = imgList.length - 1
    } else {
        index--;
    }
    document.querySelector(".dotted .current").classList.remove("current")
    LittleLi[index].classList.add("current")
    NowImg.src = imgList[index]
})

 for(let i=0;i\<LittleLi.length;i++){
    LittleLi\[i].onclick=function(){
     NowImg.src = imgList\[i]
  }
     }

function Gogo() {
    timeId = setInterval(() => {
        NextPic()
    }, 3000)
}
Gogo()

Box.onmouseenter = function () {
    clearInterval(timeId)
}
Box.onmouseleave = function () {
    Gogo()
}

Dom操作

作者：一只葱贝
链接：juejin.cn/post/684490…