<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="css/lunbo.css" /> <title>轮播</title> </head> <body> <div id="box" class="box"> <img src="img/left.png" id="left"/> <img src="img/right.png" id="right" /> <ul> <li></li> <li></li> <li></li> </ul> <ol> <li class="active"></li> <li></li> <li></li> </ol> </div> <script type="text/javascript" src="lunbo.js" ></script> </body> </html> css: *{ margin: 0; padding: 0; list-style-type: none; color: black; text-decoration: none; } #box{ 1000px; height: 600px; margin: 0 auto; border: 2px solid black; position: relative; } #box ul li{ 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s ease-in-out 0s; } #box ul li:nth-child(1){ opacity: 1; background-image: url(../img/1.jpg); background-size: cover; } #box ul li:nth-child(2){ background-image: url(../img/2.jpg); background-size: cover; } #box ul li:nth-child(3){ background-image: url(../img/3.jpg); background-size: cover; } #box img{ position: absolute; top: 50%; margin-top: -25px; z-index: 100; 50px; height: 50px; cursor: pointer; } #left{ position: absolute; left: 0; display: none; } #right{ position: absolute; right: 0; display: none; } #box ol{ 100px; position: absolute; bottom: 20px; height: 20px; left: 50%; margin-left: -50px; display: flex; justify-content: space-around; } #box ol li{ border: 2px solid white; 10px; height: 10px; background-color: #FFFFFF; border-radius: 50%; cursor: pointer; } .active{ background-color: transparent !important; } js: var arrowleft=document.getElementById("left"); //获取左箭头 var arrowright=document.getElementById("right"); //获取右箭头 var boximg=document.getElementsByClassName('box')[0].getElementsByTagName('ul')[0].getElementsByTagName('li'); //图片 var clickt=true; //点击左边触发的事件 arrowleft.onclick=function(){//点击右箭头代表让当前图片透明度为1，下一张透明度为0 if(!clickt){ return; } clickt=false; setTimeout(function(){ clickt=true; },1000); leftcut(); } //点击右边触发的事件 arrowright.onclick=function(){//点击右箭头代表让当前图片透明度为0，下一张透明度为1 if(!clickt){ return; } clickt=false; setTimeout(function(){ clickt=true; },1000); rightcut(); } var imgindex=0; //当前图片的下标为0，数组 function rightcut(){//点击右箭头 boximg[imgindex].style.opacity=0; imgindex++; if(imgindex==3){ imgindex=0; } indexchange(imgindex); boximg[imgindex].style.opacity=1; } function leftcut(){//点击左箭头 boximg[imgindex].style.opacity=0; imgindex--; if(imgindex==-1){ imgindex=2; } indexchange(imgindex); boximg[imgindex].style.opacity=1; } var boximgindex=document.getElementsByClassName('box')[0].getElementsByTagName('ol')[0].getElementsByTagName('li'); function indexchange(index){ //封装函数 for(var i=0;i<boximgindex.length;i++){ // if (i==index) { boximgindex[i].className='active'; } else{ boximgindex[i].className=''; } } } //点击下标切换图片 for(var i=0;i<boximgindex.length;i++){ (function(j){ boximgindex[j].onclick=function(){ indexchange(j) clickimg(j) imgindex=j; } })(i); } function clickimg(index){ for(var i=0;i<boximg.length;i++){ boximg[i].style.opacity=0; } boximg[index].style.opacity=1; } var box=document.getElementById("box"); box.onmouseover=function(){ arrowleft.style.display="block"; arrowright.style.display="block"; window.clearTimeout(clear) } box.onmouseout=function(){ arrowleft.style.display="none"; arrowright.style.display="none"; } var clear=null; clear=setInterval(function(){ imgindex++; if(imgindex==3){ imgindex=0; } clickimg(imgindex) //图片 indexchange(imgindex) //下标 },1500)