要求
1.自动播放
2.鼠标移入暂停播放,鼠标移除回复播放
3.点击左右箭头鼠标,切换图片
4.点击右下方源点,切换图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title><script src="js/jquery-3.4.0.js"></script><style>*{padding: 0px;margin: 0px;}#box{height: 460px;width: 1226px;margin: 30px auto;position: relative;}#box .img{list-style: none;}#box .img li{position: absolute;top: 0;left: 0;display: none;}#box .left{width: 41px;height: 69px;position: absolute;left:20px;top:195px;background-image: url("images/icon-slides.png");background-position: -83px 0;}#box .right{width: 41px;height: 69px;position: absolute;right:20px;top:195px;background-image: url("images/icon-slides.png");background-position: -124px 0;}#box .left:hover{background-position: 0 0;}#box .right:hover{background-position: -42px 0;}#box .focus{width: 250px;height: 20px;position: absolute;right: 20px;bottom: 20px;}#box .focus span{float: left;width: 15px;height: 15px;border-radius: 50%;background-color: gray;margin-left: 15px;}#box .focus .content{background-color: gainsboro;}</style><script>$(function () {function changeImg(num) {$(".img li").eq(num).fadeIn().siblings().fadeOut();$(".focus span").eq(num).addClass("content").siblings().removeClass("content");}var num = 0;//1、实现自动播放var timer = 0;function autoPlay() {timer = setInterval(function () {num++;num = (num == 7 ? 0 : num);/*num = (num==7?0:num);*/changeImg(num)},2000)}autoPlay();$("#box").mouseenter(function () {clearInterval(timer);}).mouseleave(function () {clearInterval(timer);autoPlay();})//4、点击左右的箭头，切换图片$("#box .left").click(function () {num--;num = num == -1 ? 6 : num;changeImg(num);})$("#box .right").click(function () {num++;num = num == 7 ? 0 : num;changeImg(num);})$("#box .focus span").click(function () {num = $(this).index();changeImg(num);})})</script>
</head>
<body><div id="box"><ul class="img"><li style=" display:block;"><img src="images/ban01.jpg" height="460" width="1226"/></li><li><img src="images/ban02.jpg" height="460" width="1226"/></li><li><img src="images/ban03.jpg" height="460" width="1226"/></li><li><img src="images/ban04.jpg" height="460" width="1226"/></li><li><img src="images/ban05.jpg" height="460" width="1226"/></li><li><img src="images/ban06.jpg" height="460" width="1226"/></li><li><img src="images/ban07.jpg" height="460" width="1226"/></li></ul><a class="left"></a><a class="right"></a><div class="focus"><span class="content" ></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div>
</body>
</html>
