轮播在当前的网站中还是非常使用的，在这里就将代码和大家一起分享一下
由于我是第一次学习web，如果还有其他的更好的办法，还希望大家告知
<!DOCTYPE html> <html> <head> <title>轮播图</title> <style type="text/css"> .box{//对盒子进行描述 width: 800px; height: 460px; position: relative;//定义相对位置 } .box_img{//设置图片类 position: absolute;//定义为绝对位置 top: 0; left: 0; opacity: 0;//将img类的设置为透明 transition: all 1.5s; } .box_img:nth-child(1)//第一张图片的属性设置为不透明 { opacity: 1; } .box_left{//设置左键类 position: absolute; width: 40px;//设置外边框宽 height: 60px; color: black;//设置内容颜色 top: 200px;//设置键对于box的上端的距离 text-align: center;//设计键内容在自身宽中的位置 line-height: 60px;//设置在自身高的位置 } .box_left:hover{//设置鼠标放上去的颜色 background-color: cornsilk; color: black; } .box_right{ position: absolute; width: 40px; height: 60px; color: black; top: 200px; text-align: center; line-height: 60px; right: 0; } .box_right:hover{ background-color: cornsilk; color: black; } .box_poilt{//设置下方点对于box的位置 position: absolute; bottom: 30px; right: 100px; } .box_poilt>ul{ padding: 0; margin: 0; list-style: none; } .box_poilt li{ width: 15px;//点的宽 height: 15px;//点的高 border-radius: 100%;//点的角百分之百代表达到圆的状态 background-color: aliceblue; float: left;//将纵向排列改成横向排列 margin-right: 8px;//间距-右 改变右间距 } .box_poilt li:hover{//鼠标放上去的颜色 background-color: aqua; } </style> </head> <body> <div class="box"><!--定义一个盒子--> <div class="box_img"><!--在盒子中插入三张图片--> <img src="RFC28SgLwNqhWXt.jpg" width="800" height="460"> </div> <div class="box_img"> <img src="timg1.jpg" width="800" height="460"> </div> <div class="box_img"> <img src="微信图片_20200426201326.jpg" width="800" height="460"> </div> <div class="box_left"><!--体现左右键，这里使用大于小于号表示--> < </div> <div class="box_right"> > </div> <div class="box_poilt"><!--定义下方的按钮--> <ul> <li class="box_button"></li> <li class="box_button"></li> <li class="box_button"></li> </ul> </div> </div> <script type="text/javascript" src="jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function(){ var index=0; var t; tim(); function tim(){//定义定时器方法 t=setInterval(function(){//定义一个定时器 if(index==$(".box_img").length-1)//如果当前图片在最后一张图片则跳到第一张图片 { index=0; $(".box_img").css("opacity","0");//所有图片隐藏 $(".box_img").eq(index).css("opacity","1");//显示index对应的图片 $(".box_button").css("background-color","aliceblue");//按钮背景色全部清除 $(".box_button").eq(index).css("background-color","aqua");//显示图片的按钮的背景色显示 } else { index++; $(".box_img").css("opacity","0"); $(".box_img").eq(index).css("opacity","1"); $(".box_button").css("background-color","aliceblue"); $(".box_button").eq(index).css("background-color","aqua"); } },2000)//定时器为2秒一次 } $(".box_left").click(function(){//左右按钮 clearInterval(t);//清除定时器，防止定时器和按钮同时或相近的图片切换 index--; $(".box_img").css("opacity","0"); $(".box_img").eq(index).css("opacity","1"); $(".box_button").css("background-color","aliceblue"); $(".box_button").eq(index).css("background-color","aqua"); tim();//重启定时器方法 }) $(".box_right").click(function(){ clearInterval(t); index++; if(index==$(".box_img").length) { index=0; $(".box_img").css("opacity","0"); $(".box_img").eq(index).css("opacity","1"); $(".box_button").css("background-color","aliceblue"); $(".box_button").eq(index).css("background-color","aqua"); tim(); } else { $(".box_img").css("opacity","0"); $(".box_img").eq(index).css("opacity","1"); $(".box_button").css("background-color","aliceblue"); $(".box_button").eq(index).css("background-color","aqua"); tim(); } }) $(".box_button").click(function(){ clearInterval(t); var indexx=$(this).index();//获取当前图片编号值 index=indexx; $(".box_img").css("opacity","0"); $(".box_img").eq(index).css("opacity","1"); $(".box_button").css("background-color","aliceblue"); $(".box_button").eq(index).css("background-color","aqua"); tim(); }) }) </script> </body> </html>想共同学习的可以私聊（别嫌弃我是小白）
