试验版：
每过2秒，动态切换图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图实现</title> <style type="text/css"> /*标题样式*/ p{ text-align:center; font-size:25px; color:cadetblue; font-famliy:fantasy; } .imgbox{ border-top:2px solid cadetblue; width:50%; height:500px; margin:0 auto; } .imgbox img{ width:60%; height:300px; margin:0 auto; /*padding 边际，四周均涉及*/ padding-top:30px; /*//图片居中*/ display:none; /*text-align:center;*/ /*vertical-align:middle;*/ } .img1{ display:block; } .img2{ display:none } .img3{ display:none; padding-bottom:30px; } </style> </head> <body> <p>图片轮播</p> <div class="imgbox"> <img class="img-slide img1" src="img1.jpg" alt="1"> <img class="img-slide img2" src="img2.jpg" alt="2"> <img class="img-slide img3" src="img3.jpg" alt="3"> </div> <script type="text/javascript"> var index=0; //改变图片 function imagecha(){ //改变图片 var a=document.getElementsByClassName("img-slide");//获取所有带有img-slide关键字的标签 if(index>=a.length) index=0; for(var i=0;i<a.length;i++){ a[i].style.display='none'; } a[index].style.display='block'; index++; } //设置定时器，每隔两秒钟切换图片 setInterval(imagecha,2000); </script> </body> </html>
正式版：
主要再添加圆圈和左右箭头手动移动轮播/自动轮播
(margin: 0 auto 水平居中显示)
part1
内容分三部分：
- html图片布局；
- 图片序号布局；
- 箭头移动标签布局；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width:790px; height:340px; bottom:30px; margin:80px auto; position:relative; } .img li{ position:absolute; list-style:none; top:0; left:0; } .num{ /*//脱离文档流*/ position:absolute; bottom:-160px; left:300px; /*background-color:#dce7f4;*/ list-style:none; } .num li{ display:inline-block; width:25px; height:25px; background-color:red; text-align:center; line-height:25px; border-radius:50%; margin-left:10px; } .outer img{ width:790px; height:500px; margin:0 auto; /*padding-top:30px;*/ /*display:none;*/ } .btn{ position:absolute; top:220px; width:30px; height:60px; background-color:lightgrey; color:white; text-align:center; line-height:60px; font-size:30px; opacity:0.7; display:none; /*margin-top:-30px;*/ } .left{ left:0; } .right{ right:0; } .outer:hover .btn{ display:block; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="imagecha/img1.jpg" alt=""></a></li> <li><a href=""><img src="imagecha/img2.jpg" alt=""></a></li> <li><a href=""><img src="imagecha/img3.jpg" alt=""></a></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> </body> </html>
part2
内容分三部分：
补充eq()指的是选取带有指定index值的元素
- 自动轮播；
- 手动轮播类型一（按底部数字）；
- 手动轮播类型二（按左右按键）；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width:790px; height:340px; bottom:30px; margin:80px auto; position:relative; } .img li{ position:absolute; list-style:none; top:0; left:0; } .num{ /*//脱离文档流*/ position:absolute; bottom:-160px; left:280px; list-style:none; } .num li{ display:inline-block; width:25px; height:25px; background-color:white; text-align:center; line-height:25px; border-radius:50%; margin-left:20px; } .outer img{ width:790px; height:500px; margin:0 auto; } .btn{ position:absolute; top:220px; width:30px; height:60px; background-color:lightgrey; color:white; text-align:center; line-height:60px; font-size:30px; opacity:0.7; display:none; /*margin-top:-30px;*/ } .left{ left:0; } .right{ right:0; } .outer:hover .btn{ display:block; } .num .active{ background-color:red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="imagecha/img1.jpg" alt=""></a></li> <li><a href=""><img src="imagecha/img2.jpg" alt=""></a></li> <li><a href=""><img src="imagecha/img3.jpg" alt=""></a></li> <li><a href=""><img src="imagecha/img4.jpg" alt=""></a></li> <li><a href=""><img src="imagecha/img5.jpg" alt=""></a></li> </ul> <ul class="num"> <!--<li class="active"></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script src="jquery-3.5.0.js"></script> <script> var i=0; var img_num=$(".img li").length; for(var j=0;j<img_num;j++){ $(".num").append("<li></li>"); } $(".num li").eq(0).addClass("active"); //手动轮播 $(".num li").mouseover(function(){ var i=$(this).index(); $(this).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut() }); //自动轮播 var c=setInterval(imagecha_R,1500); function imagecha_R(){ if(i==img_num-1){ i=-1; } i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut() } function imagecha_L(){ if(i==0){ i=img_num; } i--; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn().siblings().stop().fadeOut(); } $(".outer").hover(function(){ clearInterval(c); },function(){ c=setInterval(imagecha_R,1500) }); $(".right").click(imagecha_R); $(".left").click(imagecha_L); </script> </body> </html>