在很多网页或者项目开发中都会用到轮播图，现在就带大家来看一下最简单最实效的轮播图制作
首先先来看实现效果：
轮播图是一个很奇妙的啥效果，在日常生活上网中经常都会见到，现在来讲一下他的代码
自动轮播的效果：
//设定永久定时器，执行函数为自动轮播函数，时间为2秒 let se = setInterval(fn, 2000) console.log(bt); //自动轮播函数，函数名为fn function fn() { //a++ a++ console.log(a); //给这个banner的块加一个过渡，1秒 banner.style.transition = "all 1s"; //给banner这个块添加转换一次要转化多少-px，a*bannerWidth banner.style.marginLeft = `-${a * wid}px` //判断当a等于图片总长度减1时 if (a == imgs.length - 1) { //设置一次性定时器 setTimeout(function() { //让a=0 a = 0 console.log(a); //设置过渡为空 banner.style.transition = "" //设置转化px为0 banner.style.marginLeft = "0px" //时间为1秒 }, 1000) //将圆点的长度减一变为原来颜色 bt[bt.length - 1].style.backgroundColor = "rgba(0, 0, 0, 0.5)" //将第一个圆点变为红色 bt[0].style.backgroundColor = "red" } else { //将当前显示图片的-1变回原来的色 bt[a - 1].style.backgroundColor = "rgba(0, 0, 0, 0.5)" //将当前图片的圆点变为红色 bt[a].style.backgroundColor = "red" } }
鼠标移入移出事件：
//鼠标移入事件，函数名为ove function ove() { //清除永久定时器 clearInterval(se) } //鼠标移出事件，函数名欸ova function ova() { //重新引动永久定时器 se = setInterval(fn, 2000) }
左右箭头点击事件：
//右箭头点击事件，函数名为rig function rig() { //设置右边箭头点击事件为空 but1.onclick = "" //调用fn函数 fn() //设置一次性定时器 setTimeout(function() { //重新设定点击事件 but1.onclick = rig }, 1000) //时间为1秒 } //左箭头点击事件，函数名为lef function lef() { //设置左箭头点击事件为空 but.onclick = "" //调用lef1函数 lef1() //设置一次性定时器 setTimeout(function() { //重新设定点击事件 but.onclick = lef }, 1000) //时间为1秒 }
向左移的函数：
//左移函数，函数名为lef1 function lef1() { //判断当图片等于0时 if (a == 0) { //让a等于图片总长度减一 a = imgs.length - 1; console.log(a); //设置过渡为空 banner.style.transition = "" //给banner这个块添加转换一次要转化多少-px，a*bannerWidth banner.style.marginLeft = `-${(imgs.length - 1)*wid}px`; //让第一个圆点变为原来的颜色 bt[0].style.backgroundColor = "rgba(0, 0, 0, 0.5)"; //让圆点的长度减一变为红色 bt[bt.length - 1].style.backgroundColor = "red"; } setTimeout(function() { //a-- a-- console.log(a); //给这个banner的块加一个过渡，1s banner.style.transition = "all 1s" //给banner这个块添加转换一次要转化多少-px，a*bannerWidth banner.style.marginLeft = `-${a * wid}px` if (a == bt.length - 1) { //将当前显示图片的+1变回原来的色 bt[0].style.backgroundColor = "rgba(0, 0, 0, 0.5)" //将当前图片的圆点变为红色 bt[a].style.backgroundColor = "red"; } else { //将当前显示图片的+1变回原来的色 bt[a + 1].style.backgroundColor = "rgba(0, 0, 0, 0.5)" //将当前图片的圆点变为红色 bt[a].style.backgroundColor = "red"; } }, 50) }
如果不设置向左移的函数，会一直显示空白。
