Document

## 需要轮播的四张图 ![nature-4.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88c0e386fb6e47ae8db77a7820c13f9c~tplv-k3u1fbpfcp-watermark.image?) ![nature-1.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4039af33c6a49ef9414961ff31efe04~tplv-k3u1fbpfcp-watermark.image?) ![nature-2.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6ba4c3f92b04c14af219c2a9eaa3244~tplv-k3u1fbpfcp-watermark.image?) ![nature-3.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d634819d69f415a80e715d61ad3389c~tplv-k3u1fbpfcp-watermark.image?) ## html页面 ```js Document

``` ## css样式 ```js * { margin: 0; padding: 0; list-style: none; text-decoration: none; /* 去掉默认样式 */ } #banner { width: 800px; height: 400px; overflow: hidden; /* 超出隐藏 */ border: 2px solid #999; position: relative; } #banner img { /* 设置图片大小800*400 */ width: 800px; height: 400px; } /* 设置四图宽度 */ #imglist { /* 多添加一张图一补齐 */ width: 4000px; height: 400px; } #imglist li { float: left; /* 左浮动图片横排 */ } /* 设置指示器圆点 */ #icolist { position: absolute; right: 330px; bottom: 10px; text-align: center; } #icolist li { float: left; width: 30px; height: 30px; border-radius: 50%; background: #666; color: #fff; margin-left: 5px; text-align: center; line-height: 30px; cursor: pointer; } /* 小按钮css属性 */ .prev { background: #666; opacity: 0.7; height: 40px; width: 30px; position: absolute; left: 5px; top: 45%; color: #fff; line-height: 40px; text-align: center; cursor: pointer; } .next { background: #666; opacity: 0.7; height: 40px; width: 30px; position: absolute; right: 5px; top: 45%; color: #fff; line-height: 40px; text-align: center; cursor: pointer; } ``` ## 实现轮播的js代码 ```js // 获取指示器元素 var esico = document.getElementById('icolist').getElementsByTagName('li'); var eicolist = document.querySelector('#icolist'); //获取图片列表元素 var eimglist = document.querySelector('#imglist'); //获取指示器列表元素 var etest = document.querySelector('#test'); // 获取小按钮元素 var eprev = document.querySelector('.prev'); var enext = document.querySelector('.next'); // 创建移动变量与定时器 var left = 0; var timer; esico[2].style.backgroundColor = 'red'; run(); // 滚动函数，通过样式marginleft进行移动 function run() { if (left <= -3200) { left = 0; // 滚完重置 } //创建变量m获取当前图片序号 var m = Math.floor(-left / 800); imglist.style.marginLeft = left + 'px'; // 每十毫秒运行一次run,每次偏移left累计-10 var n = (left % 800 == 0) ? n = 1200 : n = 6; // 变量n，滚完一张图停留1200ms left -= 10; icochange(m); // run函数调用icochange变换指示器 timer = setTimeout(run, n); } //创建指示器变换函数 function icochange(m) { //for循环清空li元素背景色 for (let index = 0; index < esico.length; index++) { esico[index].style.backgroundColor = ''; } if (m < esico.length) { // 设置指示器背景色为红色 esico[m].style.backgroundColor = 'red'; } } // 指定图片位置函数imgchange function imgchange(n) { let lt = - (n * 800) imglist.style.marginLeft = lt + 'px'; left = lt; } eprev.onclick = function () { //获取当前位置，当前位置-1就是上一张 let prevgo = Math.floor(-left / 800) - 1; if (prevgo == -1) { // 第一张往前是第四张 prevgo = 3; } imgchange(prevgo); icochange(prevgo); } enext.onclick = function () { let nextgo = Math.floor(-left / 800) + 1; if (nextgo == 4) { nextgo = 0; } imgchange(nextgo); icochange(nextgo); } // 创建指示器列表元素点击事件 eicolist.onclick = function () { // 获取目标元素 var tg = event.target; // 获取序号 let ico = tg.innerHTML - 1; // 调用以下两个函数实现点击切换 imgchange(ico); icochange(ico); } eimglist.onmouseover = function () { clearTimeout(timer); // 鼠标在图片列表上时轮播定时器清零，轮播停止 } eimglist.onmouseout = function () { run(); } ```