一.实现原理
（1）将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏；
（2）轮播图分为手动轮播和自动轮播；
手动轮播的重点是每次点击图片下方的小圆圈，获得它的索引号，并让与之对应索引号的图片显示，并且此时的小圆圈为高亮显示；
自动轮播：利用定时器setInterval()，来每隔一定的时间来播放一次图片。
（3）所有的基础知识：dom操作，定时器，事件运用。
二.轮播图页面布局：
三.轮播图的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){
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;
}
}
}
五.效果图：
六.遇到的问题与不足
问题：当鼠标第一次移入ul标签时，自动轮播图片停止，鼠标移出，自动轮播继续，但是随着运行，轮播图片的变化速度越来越快，而且这时点击ul标签已经不起作用了。
问题原因：在后面停止轮播后再次轮播开始使用定时器的时候，没有给赋值给pic_time来记录，也就没有再次鼠标移到ul标签而清除定时器，因此导致再次点击ul标签不能暂停自动轮播播放，而且速度 越来越快。
不足：没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果，左右箭头的指示作用也没有完成。这些在后期会继续学习，继续来完善，来分享.
