html代码
原理是通过 overflow: hidden; 将ul的宽带属性设置为轮播图片的个数*100%，从而这个属性来使得div中只充斥 一个li；通过js让margin-left的值改变来实现图片轮播；
<body><div class="warp"><div class="broadcast" id="broadcast"><ul id="img_list"><li><img src="../resource/img/broadcaseImg/timg.jpg" alt="1"></li><li><img src="../resource/img/broadcaseImg/timg1.jpg" alt="2"></li><li><img src="../resource/img/broadcaseImg/timg2.jpg" alt="3"></li><li><img src="../resource/img/broadcaseImg/timg3.jpg" alt="4"></li></ul><ol id="button_list"> <!-- 轮播按钮 --><li class="first-li" id="olli1">1</li><li id="olli2">2</li><li id="olli3">3</li><li id="olli4">4</li></ol></div></div>
</body>
css
*{margin:0px;border: 0}
.warp{margin-top:100px;margin-left: 200px; width: 1030px;height: 530px;position: relative;border: 1px solid #000000;overflow: hidden;box-shadow: 0 5px 54px rgb(0, 0, 0);
}
.broadcast{margin:15px; width: 1000px;height: 500px;position: relative;overflow: hidden;
}
.broadcast ul{width: 400%;height: 100%;left: 0;top: 0;padding: 0;list-style: none;}
.broadcast li{left: 0;float: left;list-style: none;
}
.broadcast img{width: 1000px;height: 500px;
}
.broadcast ol{position: absolute;right: 30px;bottom: 30px;
}
.broadcast ol li{position: relative;float: left;width: 20px;height: 20px;border-radius: 50%;background-color: rgba(155, 155, 155,.45);color: #fff;text-align: center;margin-right: 15px;cursor: pointer;line-height: 20px;
}
.broadcast ol li.first-li{
background-color:rgba(248, 248, 248, 0.45)
}js
window.onload = function () {var broadcast = document.getElementById("broadcast"),img_list = document.getElementById("img_list"),button_list = document.getElementById("button_list").getElementsByTagName("li"),index = 0,timer = null;//初始化if (timer) {clearInterval(timer);timer = null;}// 自动切换timer = setInterval(autoPlay, 1000);// 调用自动播放函数function autoPlay() {index++;if (index >= button_list.length) {index = 0;}imgChange(index);}function imgChange(buttonIndex) {for (let i = 0; i < button_list.length; i++) {button_list[i].className="";}button_list[buttonIndex].className = "first-li";//按钮样式切换img_list.style.marginLeft = -1000 * buttonIndex + "px";index = buttonIndex;}//鼠标接触divbroadcast.onmouseover = function(){clearInterval(timer);}//鼠标离开divbroadcast.onmouseout = function(){timer = setInterval(autoPlay, 2000);}//鼠标悬停olfor (var i = 0; i < button_list.length; i++) {button_list[i].id = i;button_list[i].onmouseover = function() {clearInterval(timer);imgChange(this.id);}}
}
