一.实现原理

（1）将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏；

（2）轮播图分为手动轮播和自动轮播；

手动轮播的重点是每次点击图片下方的小圆圈，获得它的索引号，并让与之对应索引号的图片显示，并且此时的小圆圈为高亮显示；

自动轮播：利用定时器setInterval()，来每隔一定的时间来播放一次图片。

（3）所有的基础知识：dom操作，定时器，事件运用。

二.轮播图页面布局：

<divid="content"><!--总的父容器--><divclass="carousel-inner"><!--包含图片的容器--><divclass="item"><imgsrc="./img/lunbo1.jpg"alt="第一张图片"></div><divclass="item"><imgsrc="./img/lunbo2.jpg"alt="第二张图片"></div><divclass="item"><imgsrc="./img/lunbo3.jpg"alt="第三张图片"></div></div><!--图片下方的指示圆圈--><ulclass="carousel-indicators"><liid='pic1'>●</li><liid='pic2'>●</li><liid='pic3'>●</li></ul><!--图片左右方来回滚动图片的左右箭头--><ahref="#"class="carousel-controlprev"><span><</span></a><ahref="#"class="carousel-controlnext"><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-indicatorsli{display:inline-block;padding:015px;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(){//轮播初始化varlunbo=document.getElementById('content');varimgs=lunbo.getElementsByTagName('img');varuls=lunbo.getElementsByTagName('ul');varlis=lunbo.getElementsByTagName('li');//初始状态下，一个圆圈为高亮模式lis[0].style.fontSize='26px';lis[0].style.color='#fff';//定义一个全局变量，用来进行自动轮播图片顺序的变化varpic_index=1;//自动轮播.使用pic_time记录播放，可以随时使用clearInterval()清除掉。varpic_time=setInterval(autobofang,3000);//手动轮播for(vari=0;i<lis.length;i++){lis[i].addEventListener("mouseover",change,false);}functionchange(event){varevent=event||window.event;vartarget=event.target||event.srcElement;varchildren=target.parentNode.children;for(vari=0;i<children.length;i++){if(target==children[i]){picChange(i);}}}//图片切换函数functionpicChange(i){//让所有图片都不显示，所有圆圈都为普通样式for(varj=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';}//自动播放的事件处理functionautobofang(){if(pic_index>=lis.length){pic_index=0;}change1(pic_index);pic_index++;}//自动播放的图片转化中的事件functionchange1(index){picChange(index);//鼠标移入ul标签，自动播放图片暂停uls[0].addEventListener("mouseover",pause,false);//鼠标移出ul标签，自动播放图片继续uls[0].addEventListener("mouseout",go,false);}//自动播放暂停函数functionpause(event){varevent=event||window.event;vartarget=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;}}//自动播放图片继续函数functiongo(event){varevent=event||window.event;vartarget=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标签不能暂停自动轮播播放，而且速度 越来越快。

不足：没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果，左右箭头的指示作用也没有完成。这些在后期会继续学习，继续来完善，来分享.