简单的js轮播图 轮播图在制作网页方面是一个比较重要的内容，轮播图有很多方法去实现，最简单的是通过Bootstrap框架来实现，这里主要针对还没学习框架只是使用js+html+css来实现轮播图自动播放。 这里还是参照成都大学教务系统的轮播图来说明如何使用js制作轮播图 轮播图要实现的功能：1.轮播图能自动播放 2.左右两边有箭头按钮，点击能切换图片 3.图片下方有小圆点图标，图片滑动圆点会跳到相应的图片页，并且点击小圆点能切换到相应图片页。 下面是代码部分： html代码：
<body> <div class="wrap"> <ul class="list"> <li class="item active"><img src="图片/1p.jpg"></li> <li class="item"><img src="图片/2p.jpg"></li> <li class="item"><img src="图片/3p.jpg"></li> <li class="item"><img src="图片/4p.jpg"></li> <li class="item"><img src="图片/5p.jpg"></li> </ul> <ul class="pointList"> <li class="point active" data-index='0'></li><!--在标签里存入数据 --> <li class="point" data-index='1'></li> <li class="point" data-index='2'></li> <li class="point" data-index='3'></li> <li class="point" data-index='4'></li> </ul> <button type="button" class="btn" id="goPre" onclick="goPre()"><</button> <button type="button" class="btn" id="goNext" onclick="goNext()">></button> </div>CSS代码：
.wrap{ width:800px; height:400px; position:relative; } .list{ width:800px; height:400px; list-style:none; position: relative; padding-left: 0px; } .item{ width:100%;/*继承list的宽度*/ height: 100%; position: absolute; opacity: 0; transition:all .5s; } .btn{ width:50px; height:100px; position:absolute; top:150px; z-index: 100; cursor: pointer; } /* 左图标 */ #goPre{ left:0px; } /* 右图标 */ #goNext{ right:0px; } /* 图片大小 */ img{ width:800px; height:400px; } /* 控制显示图片*/ .item.active{ z-index: 10; opacity: 1; } .pointList{ padding-left: 0px; list-style-type: none; position:absolute; right:20px; bottom: 20px; z-index: 1000; }/* 设置圆点图标的相应属性 */ .point{ width:10px; height:10px; background-color: rgba(0,0,0,0.4); border-radius: 100%; float:left; margin-right: 20px; border-style: solid; border-width: 2px; border-color:#312f2f99; cursor: pointer; } .point.active{ border-color:hsla(0, 59%, 58%, 0.952) }js代码：
var items=document.getElementsByClassName("item"); var points=document.getElementsByClassName("point"); var index=0;//index表示第几张图片在展示 // 清除函数 var clearActive=function(){ for(var i=0;i<items.length;i++){ items[i].className="item"; } for(var i=0;i<points.length;i++){ points[i].className="point"; } } var goIndex=function(){ clearActive(); points[index].className="point active"; items[index].className="item active"; } // 切换下一张图片 var goNext=function(){ if(index<4){ index++; }else{ index=0; } goIndex(); } // 切换上一张图片 var goPre=function(){ if(index==0){ index=4; }else{ index--; } goIndex(); } // 点击圆点切换相应图片 for(var i=0;i<points.length;i++){ points[i].addEventListener('click',function(){ var pointIndex=this.getAttribute("data-index"); index=pointIndex; goIndex(); }) } // 图片自动播放 var time=0; setInterval(function(){ time++; if(time==20){ goNext(); time=0; } },100)总结：这个轮播图的实现不仅需要熟练掌握并正确使用js相关函数及事件，还要熟练使用position属性来对相关的按钮进行布局，如果不使用absolute进行绝对定位那么当浏览器窗口缩小时相应图片会出现流动的效果，这样的用户体验是十分糟糕的，所以在实现代码时切忌要将相应图标定位。自己在写这个轮播图的时候也会粗心大意忘记将图标定位，可能还是对盒子模型的有些知识点理解的不是很到位，所以在往后学习的同时也会继续巩固前面学到的内容
