（1）将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏；
（2）轮播图分为手动轮播和自动轮播；
手动轮播的重点是每次点击图片下方的小圆圈，获得它的索引号，并让与之对应索引号的图片显示，并且此时的小圆圈为高亮显示；
自动轮播：利用定时器setInterval()，来每隔一定的时间来播放一次图片。
（3）所有的基础知识：dom操作，定时器，事件运用。
二.轮播图页面布局：
<div> <!-- 总的父容器 --> <div> <!-- 包含图片的容器 --> <div><img src="https://www.jb51.net/article/img/lunbo1.jpg" alt="第一张图片"></div> <div><img src="https://www.jb51.net/article/img/lunbo2.jpg" alt="第二张图片"></div> <div><img src="https://www.jb51.net/article/img/lunbo3.jpg" alt="第三张图片"></div> </div> <!-- 图片下方的指示圆圈--> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> <!-- 图片左右方来回滚动图片的左右箭头--> <a href="#"><span><</span></a> <a href="#"><span>></span></a> </div>
三.轮播图的css样式：
#content{ width: 100%; height:500px; position: relative; } .carousel-inner{ position: relative; width: 100%; overflow: hidden; height:500px; } .carousel-inner>.item>img{ display: block; line-height: 1; z-index: 1; } .carousel-indicators{ position: absolute; bottom:10px; left:45%; z-index: 2; list-style-type: none; } .carousel-indicators li{ display:inline-block; padding: 0 15px; font-size: 24px; color:#999; cursor: pointer; z-index: 2; } .active1{ font-size: 28px; color:#fff; } .carousel-control{ position: absolute; text-decoration:none; color: #999; font-weight: bold; opacity: .5; font-size: 40px; z-index: 3; } .carousel-control:hover{ color:fff; text-decoration: none; opacity: .9; outline: none; font-size: 42px; } .prev{ top: 30%; left:20px; } .next{ top:30%; right: 20px; }
四.轮播图的js实现代码：
window.onload = function(){ //轮播初始化 var lunbo = document.getElementById('content'); var imgs = lunbo.getElementsByTagName('img'); var uls = lunbo.getElementsByTagName('ul'); var lis = lunbo.getElementsByTagName('li'); //初始状态下，一个圆圈为高亮模式 lis[0].style.fontSize = '26px'; lis[0].style.color = '#fff'; //定义一个全局变量，用来进行自动轮播图片顺序的变化 var pic_index = 1; //自动轮播.使用pic_time记录播放，可以随时使用clearInterval()清除掉。 var pic_time = setInterval(autobofang,3000); //手动轮播 for(var i=0;i<lis.length;i++){ lis[i].addEventListener("mouseover",change,false); } function change(event){ var event=event||window.event; var target=event.target||event.srcElement; var children = target.parentNode.children; for(var i=0;i<children.length;i++){ if(target == children[i]){ picChange(i); } } } //图片切换函数 function picChange(i){ //让所有图片都不显示，所有圆圈都为普通样式 for(var j=0;j<imgs.length;j++){ imgs[j].style.display = 'none'; lis[j].style.fontSize = '24px'; lis[j].style.color = '#999'; } //让选中的索引的图片显示，对应的圆圈高亮 imgs[i].style.display = 'block'; lis[i].style.fontSize = '26px'; lis[i].style.color = '#fff'; } //自动播放的事件处理 function autobofang(){ if(pic_index >= lis.length){ pic_index = 0; } change1(pic_index); pic_index++; } //自动播放的图片转化中的事件 function change1(index){ picChange(index); //鼠标移入ul标签，自动播放图片暂停 uls[0].addEventListener("mouseover",pause,false); //鼠标移出ul标签，自动播放图片继续 uls[0].addEventListener("mouseout",go,false); } //自动播放暂停函数 function pause(event){ var event=event||window.event; var target=event.target||event.srcElement; switch(target.id){ case "pic1": clearInterval(pic_time); break; case "pic2": clearInterval(pic_time); break; case "pic3": clearInterval(pic_time); break; } } //自动播放图片继续函数 function go(event){ var event=event||window.event; var target=event.target||event.srcElement; switch(target.id){ case "pic1": pic_index = 1; pic_time = setInterval(autobofang,3000); break; case "pic2": pic_index = 2; pic_time = setInterval(autobofang,3000); break; case "pic3": pic_index = 3; pic_time = setInterval(autobofang,3000); break; } } }
五.效果图：
六.遇到的问题与不足