话不多说直接上代码
html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./css/banner.css" /> </head> <body> <div class="Viewable" onmouseover="Moveto()" onmouseout="Moveout()"> <div class="content"> </div> <div class="V-left" onclick="left()"> <img src="./img/Left_arrow.png" alt="" /> </div> <div class="V-right" onclick="right()"> <img src="./img/right-arrow.png" alt="" /> </div> <div class="v-round"> </div> </div> <script> //获取包裹圆点的盒子 let round = document.getElementsByClassName('v-round')[0]; //获取包裹所有图片的盒子 let content = document.getElementsByClassName('content')[0]; //获取左箭头的盒子 let vleft = document.getElementsByClassName('V-left')[0]; //获取右箭头的盒子 let vright = document.getElementsByClassName('V-right')[0]; //声明数据的变量 let data; //声明一个下标变量 let k = 0; //声明一个图片宽度的变量 let widths; //声明一个定时器的变量 let b; // 设置请求方式和请求地址 let xhr = new XMLHttpRequest(); // 接收返回的响应数据 xhr.open('get', 'js/banner.json', true); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { //将获取的文本数据转换为JSON格式 let text = xhr.responseText; // 调用展示商品的函数 data = JSON.parse(text); // 调用函数 prints(data); } } function prints(data) { //声明两个字符串一个为图片的,一个是圆点的 let str = ''; let div = ""; //循环数据获取里面的内容 for (let i = 0; i < data.imgs.length; i++) { //字符串拼接图片 str += `<img src="${data.imgs[i]}" alt="${data.imgs[i]}">` //判断i是否为0 if (i == 0) { //字符串拼接,给圆点一个背景颜色 div += `<div style="background-color: red;"></div>`; } else { //圆点字符串拼接 div += `<div></div>` } } //把圆点添加到放圆点的div里面 round.innerHTML = div; //在拼接一个第一张图片 str += `<img src="${data.imgs[0]}" alt="${data.imgs[0]}">` //把图片放到包裹图片的div里面 content.innerHTML = str; //获取第一张图片 let picture = content.getElementsByTagName('img')[0]; //获取图片的宽度 widths = picture.offsetWidth; //轮播图的定时器 Moveout(); } //获取圆点的数组 let dot = round.getElementsByTagName('div'); //轮播图 function banners() { //每次执行让下标加一 k++; //设置过渡时间 content.style.transition = "all 1s"; content.style.marginLeft = '-' + widths * k + 'px'; if (k == dot.length) { dot[0].style.backgroundColor = 'red'; dot[k - 1].style.backgroundColor = 'white'; setTimeout(function() { k = 0; content.style.marginLeft = '-' + widths * k + 'px'; content.style.transition = "0s"; }, 1000) } else if (k < dot.length) { dot[k - 1].style.backgroundColor = 'white'; dot[k].style.backgroundColor = 'red'; } } //清除定时器 function Moveto() { console.log(1); clearInterval(b); } //设置定时器 function Moveout() { b = setInterval(banners, 3000); console.log(1); } //左箭头的点击事件 function left() { vleft.onclick = null; k--; if (k < 0) { k = dot.length; content.style.marginLeft = '-' + widths * k + 'px'; content.style.transition = "0s"; setTimeout(function() { k--; dot[k].style.backgroundColor = 'red'; dot[0].style.backgroundColor = 'white'; content.style.marginLeft = '-' + widths * k + 'px'; content.style.transition = "all 1s"; }, 0) } else { dot[k + 1].style.backgroundColor = 'white'; dot[k].style.backgroundColor = 'red'; content.style.transition = "all 1s"; content.style.marginLeft = '-' + widths * k + 'px'; } setTimeout(function() { vleft.onclick = left; }, 1100) } //右箭头的点击事件 function right() { vright.onclick = null; banners(); setTimeout(function() { vright.onclick = right; }, 1500) } </script> </body> </html>
css：
* { margin: 0%; padding: 0%; } .Viewable { width: 15%; margin: auto; height: 325px; position: relative; overflow: hidden; } .V-left { height: 6%; position: absolute; top: 47%; left: -1.5%; background: aqua; } .V-left img { width: 100%; height: 100%; } .V-right { height: 6%; position: absolute; top: 47%; right: -1.5%; background: aqua; } .V-right img { width: 100%; height: 100%; } .content { height: 325px; font-size: 0; display: flex; flex-wrap: nowrap; } .content img { width: 230px; height: 100%; flex-shrink: 0; } .v-round { width: 50%; height: 10px; border: solid 0px; position: absolute; left: 25%; bottom: 10px; display: flex; justify-content: space-around; } .v-round div { width: 10%; height: 12px; border-radius: 100%; background-color: aliceblue; }
假数据：
{ "imgs": [ "./img/18d8bc3eb13533fa40fd17276d928a1941345b3c.webp", "./img/4034970a304e251fb75ab13d19c7be117e3e5309.webp", "./img/359b033b5bb5c9eacfaa73e11478c1063af3b31b.webp", "./img/8d5494eef01f3a2910bcc12f5864cb375d607ca6.webp", "./img/4e4a20a4462309f74a21b569cc4f7bf5d6cad6c3.webp" ] }
实际效果：
