HTML代码：
<div class="banner"> <div class="ban"> </div> </div> <div class="bot"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
CSS代码：
.ban>img { width: 412px; height: 250px; } .ban { width: auto; height: 250px; display: flex; position: absolute; } .banner { width: 100%; height: 250px; position: relative; overflow: hidden; margin-bottom: 47px; }
JS代码：
function banner(data) { for (let i = 0; i < data.data.trends.length; i++) { ner += `<img src="图片路径" alt=""/>` } ner += `<img src="图片路径" alt=""/>` $('.ban').html(ner); // 获取图片宽度 widh = $('.ban>img').eq(0).width(); console.log(widh); // 获取图片数组 imgNum = $('.ban>img'); // 设置永久性定时器 } let timeBanner = setInterval(bann, 2000); // 设置下标 var num = 0; // 定义函数 numUl[0].style.color = 'red'; function bann() { // num自加1 num++; // 设置ban的样式 过度 $('.ban').css('transition', 'all 1s'); // 设置滑动 $('.ban').css('margin-left', '-' + num * widh + 'px'); // 当下标等于最后一位时 if (num == imgNum.length - 1) { // 设置一次性定时器，纵享丝滑 setTimeout(function() { //下标设为0 num = 0; // 过渡效果删去 $('.ban').css('transition', ''); // 将图片设为第一张 $('.ban').css('margin-left', '-' + 0 + 'px'); }, 1000) // 第一个圆点颜色设为红色 numUl[0].style.color = 'red'; // 最后一个设为黑色 numUl[numUl.length - 1].style.color = 'black'; } else { // 第num个设为红色 numUl[num].style.color = 'red'; // 第num-1个设为黑色 numUl[num - 1].style.color = 'black'; } }
