HTML+CSS+Javascript实现轮播图效果
注意：根据自己图片大小来更改轮播图大小。
<!doctype html> <html> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } /*去掉ul、ol、li源有的样式*/ ul, ol, li { list-style: none; } /*设置图片样式为*/ img { width: 100%; height: 100%; display: block; /*图片可见*/ } /*设置最大div的样式*/ .banner { width: 50%; height: 60%; position: absolute; margin: 50px 0; left: 50%; top: 50%; transform: translate(-50%, -50%); } /*设置ul的样式对齐方式为相对对齐*/ .banner>ul { width: 100%; height: 100%; position: relative; } /*设置装图片的li样式*/ .banner>ul>li { width: 100%; height: 100%; position: absolute; /* 绝对对齐*/ left: 0; top: 0; opacity: 0; /*完全透明*/ transition: opcity .5s linear; /* 平滑过渡*/ } /*当用户点击后释放鼠标后图片的li生效*/ .banner > ul > li.active { opacity: 1; /* 完全不透明*/ } /*下方呈现的小按钮外围样式*/ .banner > ol { width: 200px; height: 60px; position: absolute; /*绝对定位*/ left: 50%; bottom: 50px; background-color: coral; opacity: 0.4; transform: translateX(-50%); /*左边距减去自身的一半*/ display: flex; /*水平排列*/ justify-content: space-around; /*水平两端对齐*/ align-items: center; /*垂直居中对齐 */ border-radius: 80px; /*圆角*/ } /*下方小圆按钮的样式*/ .banner > ol > li { width: 20px; height: 20px; background-color: aliceblue; border-radius: 50%; /*圆角50%*/ cursor: pointer; /*鼠标移动到此处变成小手*/ } /*点击小按钮后释放鼠标后li生效*/ .banner > ol > li.active { background-color: limegreen; } /*左右按钮*/ .banner>div { width: 100px; height: 150px; position: absolute; top: 50%; transform: translateY(-50%); /*上边距减去自身高度的一半*/ background-color: black; opacity: 0.4; /* 透明度0.4*/ display: flex; /*摆脱文档流限制，相对定位*/ justify-content: center; /*内部元素和内容垂直居中*/ align-items: center; /*内部元素和内容水平居中*/ font-size: 90px; /*字体大小*/ color: aliceblue; } /*左边按钮样式*/ .banner>div.left { left: 0; /* 左对齐*/ cursor: pointer; /*鼠标移动到此处变成小手*/ } /*右边按钮样式*/ .banner>div.right { right: 0; /* 右对齐*/ cursor: pointer; /*鼠标移动到此处变成小手*/ } </style> </head> <body> <div class="banner"> <ul class="imgBox"> <li class="active"><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> </ul> <ol><!--自定义属性 自定义属性--> <li data-i="0" class="active" data-c="pas"></li> <li data-i="1" data-c="pas"></li> <li data-i="2" data-c="pas"></li> <li data-i="3" data-c="pas"></li> </ol> <div class="left"><</div> <!--<代表"<"--> <div class="right">></div> <!--<代表">"--> </div> <script type="text/javascript"> //获取所有图片的li和所有焦点的li var imgs=document.querySelectorAll("ul > li") var point=document.querySelectorAll("ol > li") //获取最大div的元素 var banner=document.querySelector(".banner") //index表示第几张图片默认第0张显示 var index=0 //隐藏当前这种图片，显示第index张图片方法 //true表示切换到下一张图片 //false表示切换到上一张图片 function changeOne(type){ //隐藏第index张图片 imgs[index].className='' //隐藏第index个按钮高亮(绿色) point[index].className='' //判断传过来的值是否是true，是就切换下一张图片 if(type===true){ index++ }else if(type===false){ //判断传过来的值是否是false，是就切换上一张图片 index-- }else{ //都不是说明点击是小圆点，就切换到type张图片 index=type } //判断index有没有越界，越了就从头开始或者从最后开始 if(index>=imgs.length){ index=0 } if(index<0){ index=imgs.length-1 } //为index张图片设置active属性 //图片是透明度设置不透明， imgs[index].className="active" //小圆点是设置高亮 point[index].className="active" } //单击判断调用changeOne(type)方法 banner.onclick=function(e){ //判断点击的是否是点击了左边的按钮 if(e.target.className==="left"){ changeOne(false)//如果是就调用方法，并传参false } //判断点击的是否是点击了右边的按钮 if(e.target.className==="right"){ changeOne(true) //如果是就调用方法，并传参true } //判断是否点击了小按钮(自定义属性判断，可以去看小圆点li里的(data-c)) if(e.target.dataset.c==="pas"){ //如果是再次通过自定义属性判断点击的哪一个小圆点，并把值传过去 var i=e.target.dataset.i-0 changeOne(i) } } //自动切换下一张图片方法 setInterval(function(){ changeOne(true) },5000) </script> </body> </html>
