【轮播图】HTML+CSS+JavaScript实现轮播图

轮播图实现

第一步，构建html结构和css样式

<div class="header"><div class="content"></div></div><div class="center"><div class="box"><div class="first"><div class="firstChild1"><div class="firstChild1_box"><div class="firstChild1_box_left hover"><</div><div class="firstChild1_box_center"><!-- 这里可以进行for循环 --><!-- <img src="https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62825130816/57e3/05be/dbaa/35ba17ba02d8485482440213c7bfb115.jpg?imageView&quality=89" alt=""> --><!-- <img src="https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62821641259/9168/ff56/496a/c8e1f7f69f747c564cc5b8a91c9dd9cf.jpg?imageView&quality=89" alt=""> --><div class="login"><div class="card"><div class="title">登录</div><input type="text" class="input" placeholder="用户名"><input type="password" class="input" placeholder="密码"><input type="submit" class="button"></div></div></div><div class="firstChild1_box_right hover">></div></div></div><div class="firstChild2">4324243</div></div><div class="second ">323</div></div></div><div class="footer"></div>

<style>body{position: relative;height: 100vh;margin: 0;padding: 0;background-color: #ccc;}.header{border: 1px solid black;height: 70px;width: 100%;}.center{display: flex;justify-content: center;align-items: center;border: 1px solid black;width: 100%;}.box{/* 先设置宽度，然后之后再重新修改宽度 *//* width: 1200px; */border: 1px solid black;}.first{background-color: #fff;}.firstChild1{background-color: #d48080;}.firstChild1_box{display: flex;justify-content: center;align-items: center;}.firstChild1_box_center{display: flex;}.firstChild1_box_center .login{display: flex;justify-content: center;align-items: center;background-color: rgb(47, 43, 43);border: 1px solid black;}.firstChild1_box_center .login .card{display: flex;flex-direction: column;justify-content: space-evenly;width: 300px;background-color: gray;}.firstChild1_box_center .login .card .title{/* text-align: center; */margin: 20px;}.firstChild1_box_center .login .card .input{margin: auto;width: 200px;height: 18px;margin-bottom: 15px;}.firstChild1_box_center .login .card .button{margin: auto;width: 200px;margin-bottom: 20px;}.firstChild1_box_left{cursor: pointer;font-size: 30px;border: 1px solid black;}.firstChild1_box_right{cursor: pointer;font-size: 30px;border: 1px solid black;}.firstChild1_box_left:hover{background-color: #ccc;}.firstChild1_box_right:hover{background-color: #ccc;}.firstChild2{background-color: #c46e6e;}.second{background-color: #7b6363;}.footer{position: fixed;bottom: 0;width: 100%;height: 70px;border: 1px solid black;}</style>

第二步，确认三个数据

const imgData = [{id: 1,imgSrc: "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62825130816/57e3/05be/dbaa/35ba17ba02d8485482440213c7bfb115.jpg?imageView&quality=89"},{id: 2,imgSrc: "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62821641259/9168/ff56/496a/c8e1f7f69f747c564cc5b8a91c9dd9cf.jpg?imageView&quality=89"},{id: 3,imgSrc: "https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/62801174495/263c/d484/615b/2fdf2104fd80a45b430fc4f4607fc3ac.jpg?imageView&quality=89"}]

第三步，构建js函数

let currentId = 0let currentData = imgData.slice(currentId,currentId+1)[0] //splice会改变原的数组console.log("currentId", currentId)console.log("imgData", imgData)console.log("currentData" , currentData)//添加图片的函数function changeImg(){console.log(currentId)currentData = imgData.slice(currentId,currentId+1)[0]console.log("currentData", currentData)const img = document.createElement("img")img.src = currentData.imgSrcimg.dataset.id = currentData.idconst firstChild1_box_center = document.querySelector(".firstChild1_box_center")const login = document.querySelector(".login")//如何解决dom渲染次数错误?//可以先渲染图片之后再调整顺序firstChild1_box_center.innerHTML = ""firstChild1_box_center.append(img)firstChild1_box_center.append(login)}function slideshow() {setInterval(() => {currentId = (currentId + 1) % imgData.length; // 0→1→2→0 循环changeImg();}, 15000);}changeImg()slideshow()//点击按钮事件const firstChild1_box_left = document.querySelector(".firstChild1_box_left")const firstChild1_box_right = document.querySelector(".firstChild1_box_right")firstChild1_box_left.addEventListener("click", function(){console.log("left")if(currentId === 0){alert("已经是第一页了")return}currentId--;changeImg()})  firstChild1_box_right.addEventListener("click", function(){console.log(currentId)console.log("right")if(currentId === imgData.length -1){alert("已经是最后一页了")return}currentId++;changeImg()})

第四步：总结

在这一次构建html+css样式中，学会了如何通过flex布局构建页面，

在JavaScript编写的代码中学习到了函数和变量提升，并利用函数先声明后使用

写出来较为整洁的代码。

通过currentId = (currentId + 1) % imgData.length 学习到：

% 运算本身在任意数据量下都是常数时间，无需替换；如果5张图呢？

5 张图 = “数据量小”，直接沿用 (currentIndex + 1) % 5 即可，不用任何虚拟化。

通过JavaScript代码还学习到了如何渲染节点和dataset的使用，可以直接通过dom节点操作，

for循环也可以进行节点操作。

仓库见：轮播图