这篇博客，我为大家带来的还是一个小项目！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box { width: 100%; height: 450px; background-color: palevioletred; overflow: hidden; } #boxx { width: 400%; height: 100%; } #boxx img { width: 25%; height: 100%; float: left; background-size: 100%; } #wq { width: 40px; height: 40px; background-color: rgba(243, 243, 243, 0.4); position: fixed; top: 200px; left: 8px; } #wq p { text-align: center; line-height: 5px; font-size: 20px; color: rebeccapurple; } #wh { width: 40px; height: 40px; background-color: rgba(243, 243, 243, 0.4); position: fixed; top: 200px; right: 8px; } #wh p { text-align: center; line-height: 5px; font-size: 20px; color: mediumpurple; } #yuand { position: absolute; top: 430px; width: 98%; text-align: center; color: white; } </style> </head> <body > <div id="box" onmouseover="yr()" onmouseout="yc()"> <div id="boxx"> <img src="img/wuztwo.jpg" alt="" id="imgWidth"/> <img src="img/wuzone.webp" alt="" /> <img src="img/wuzthree.webp" alt="" /> <img src="img/wuztwo.jpg" alt="" /> </div> <div id="wq" onclick="next()"> <p>←</p> </div> <div id="wh" onclick="last()"> <p>→</p> </div> <div id="yuand"> <span>●</span> <span>●</span> <span>●</span> </div> </div> <!--onmouseover="yr()" onmouseout="yc()"--> <script src="index.js"></script> </body> </html>
上面的是基本样式；
let k = 0; //获取到HTML中的最大div box;(为了后期给大div绑定鼠标移入移出事件，把鼠标放图片上会让轮播图停止轮播，放外重新轮播) let box = document.getElementById('box'); //获取到HTML中的图片列表 boxx;(获取四张图片父级div,以便后期让图片动起来) let boxx = document.getElementById('boxx'); //获取到一张图片的宽 imgWidth;(boxx的children[0]的宽)offsetWidth let imgWidth = boxx.children[0].offsetWidth; console.log(imgWidth); //获取图片向前按钮 wq;(让图片向后) let wq = document.getElementById('wq'); //获取图片向后按钮 wh;(让图片向前) let wh = document.getElementById('wh'); //获取三个小圆点 yuand;(获取数组) let yuand = document.getElementById('yuand') //设置永久定时器 setInterval;(Interval) let Interval = setInterval(autoBanner, 2000); //每隔两秒执行一次autoBanner //执行秒数(执行2秒) //创建一个函数 autoBanner 一次让图片向右移动一张，当图片到最后一张让图片跳到第一张) function autoBanner() { //k++让图片数量加加; k++; //给boxx图片列表设定过渡效果(1秒) document.getElementById('boxx').style.transition = "all 1s"; //给boxx图片列表设置左边距marginLeft -k*imgwidth 让图片向右移 document.getElementById('boxx').style.marginLeft = `${-k*imgWidth}px`; //if判断(k是否等于boxx的children.length-1){ 是否是最后一张照片 if (k == boxx.children.length - 1) { setTimeout(function() { k = 0; document.getElementById('boxx').style.marginLeft = "0"; document.getElementById('boxx').style.transition = "null"; yuand.children[0].style.color = "rebeccapurple"; yuand.children[yuand.children.length - 1].style.color = "white" }, 1000) } else { yuand.children[k].style.color = "rebeccapurple"; yuand.children[k - 1].style.color = "white"; } } //设置一个一次性定时器 setTimeout(时间设1秒){ //k=0(让图片回到第一张) //把boxx的外边距margin设为0 //将轮播图boxx过渡效果设为空null //} //yuand[0]让第一个小圆点的颜色变为red //让最后一个小圆点的颜色变回原来的颜色 // }else{ //让k的小圆点变为red //让k-1的小圆点变为黑色 // } //给图片向前一张按钮用 onclick绑定点击事件; function next() { autoBanner(); wq.onclick = "" setTimeout(function() { wq.onclick = next }, 1500); } //创建函数 函数名为next(){ //调用autoBanner() //先清除下一张按钮这个点击事件 //在一秒之后重新绑定(next)设置一次性定时器 //} //创建一个函数backUp;(执行一次让图片向左移动一张,当图片到第一张让图片跳到最后一张){ function backUp() { k--; // console.log(k); document.getElementById('boxx').style.transition = "all 1s"; document.getElementById('boxx').style.marginLeft = `${-k*imgWidth}px`; // console.log(`${+k*imgWidth}px`); if (k == 0) { setTimeout(function() { k = boxx.children.length - 1; document.getElementById('boxx').style.marginLeft = `${-k*imgWidth}px`; document.getElementById('boxx').style.transition = "null"; // yuand.children[0].style.color = "rebeccapurple"; // yuand.children[yuand.children.length-1].style.color = "white" yuand.children[k].style.color = "rebeccapurple"; yuand.children[k + 1].style.color = "white"; }, 800) } } //if判断(图片是否到第一张){ //让图片到最后一张(boxx的children.length-1)给k赋值 //先清除boxx的过渡效果 null //让boxx的外边距marginleft -k*imgwidth // } //设置一个一次性定时器(时间为五毫秒){ //k--(让图片向上一张) //给boxx图片列表设定过渡效果(1秒) //给boxx图片列表设置左边距marginLeft -k*imgwidth 让图片向右移 //if判断(k<boxx的children.length-1){ //让k的小圆点变为red //让k+1的小圆点变为黑色 // } // } //} //给图片向后一张按钮用onclick绑定点击事件; function last() { backUp() wh.onclick = "" setTimeout(function() { wh.onclick = last }, 1500) } //创建函数 函数名为last(){ //调用函数backUp() //先清除上一张按钮这个点击事件 //在一秒之后重新绑定(last)设置一次性定时器 //} //给box设置鼠标移入事件 让轮播图停止轮播(onmouseover); function yr() { clearInterval(Interval); } //清除永久定时器让轮播图停止自动播放; //给box设置鼠标移除事件 让轮播图继续轮播(onmouseout); function yc() { Interval = setInterval(autoBanner, 2000) }
这是js里的代码，主要是来操作轮播图的，让其自动轮播，点击轮播，鼠标移入停止，移出轮播！
主要由这几个事件组成！
还有，鼠标移入、移出，事件，是绑给最大div的！
