一、效果预览：
由于只能上传2M以下的图片，这里只截取了自动切换的效果：
二、编写语言
HTML、CSS、原生JS
三、编写思路
（一）HTML部分
1、.slide意为滑槽，里面存放所有图片；
2、.prev存放向左的箭头，.next存放向右的箭头；
3、pointer意为指示器，存放下方的五个切换按钮，每个切换按钮用span来表示；
4、.m-view，意为视窗，即每次看到图片的窗口，它存放以上所有的部件；
（二）CSS部分
1、.m-view设为相对定位，他的后代元素可以以它作为绝对定位的参照；
2、.slide、.prev、.next、pointer全都用绝对定位放到合适位置；
3、.slide的所有图片水平排列，且视窗.m-view的宽度设为只有一张图片那么宽，这样默认情况.slide还是会全部显示；当给.m-view设置overflow:hidden后子元素超出它的部分就会隐藏，就实现了只显示一张图片的效果；
（三）JS部分
1、切换功能：
设置一个切换函数toggle实现左切或者右切一张图，toggle有两个子函数leftToggle和rightToggle分别实现向左、向右切换一张图，将他们分别绑定到.prev和.next按钮的clik事件；
2、切换功能的淡入动画效果
只有1的话切换是立即产生的，没有过渡效果；这里利用定时器和步长将切换功能细化到更小的滑动操作leftStep和rightStep，leftToggle和rightToggle通过多次调用滑动操作来实现一次切换，这样就会产生动画效果；
3、跳转功能
对指示器的每个圆形按钮绑定跳转功能，跳转实际上是将.slide进行移动；
4、自动播放
只需要设置定时器，每隔一定时间执行切换即可；
四、我的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> .m-view,.m-view .slide img{ position: relative;/*作为绝对定位的父元素*/ width: 800px; height: 600px; } .m-view{ overflow: hidden;/*将超出该div的子元素隐藏*/ } .m-view .slide{ position: absolute; width: 8000px; height: 600px; } .m-view .slide img{ margin-right: -5px; } .m-view .prev,.m-view .next{ position: absolute; top: 40%; font: 60px/60px Microsoft YaHei; color: #00BFFF; } .m-view .prev{ left: 10px; } .m-view .next{ right: 10px; } .m-view .pointer{ position: absolute; bottom: 40px; left: 33%; } .m-view .pointer span{ display: inline-block;/*水平排列*/ width: 40px; height: 40px; border-radius: 20px; margin-right: 10px; background-color: #00FF00; } .m-view .pointer .on{/*点亮当前图片对应的圆圈*/ background-color: #1E90FF; } </style> </head> <body> <div> <div> <img src="https://www.jb51.net/lunbo/5.jpg" alt="4"> <img src="https://www.jb51.net/lunbo/1.jpg" alt="0"> <img src="https://www.jb51.net/lunbo/2.jpg" alt="1"> <img src="https://www.jb51.net/lunbo/3.jpg" alt="2"> <img src="https://www.jb51.net/lunbo/4.jpg" alt="3"> <img src="https://www.jb51.net/lunbo/5.jpg" alt="4"> <img src="https://www.jb51.net/lunbo/1.jpg" alt="0"> </div> <div><</div> <div>></div> <div> <span index="0"></span> <span index="1"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> </div> </div> <script type="text/javascript"> var view=document.getElementsByClassName('m-view')[0]; var slide=document.getElementsByClassName('slide')[0]; var prev=document.getElementsByClassName('prev')[0]; var next=document.getElementsByClassName('next')[0]; var button=document.getElementsByClassName('button'); var curIndex=0;//当前图片的索引位置 var toggled=true;//是否正在切换，true表明切换已完成，此时才能切换 /* Toggle函数实现切换一张图片的功能 */ function Toggle () { var TIMER=50;//滑动一次所用的时间，它是setInterval的第二个参数 var time=800;//每切换一张图片总共用的时长 var times=time/TIMER;//每切换一张图片需滑动的次数 var stepLenth=800/times;//每次滑动的步长 var leftToggle=function () { var t1=times; function leftStep(){ slide.style.left=parseInt(slide.style.left)+stepLenth+"px"; t1--; if (!t1) { clearInterval(interval); curIndex--; if (curIndex<0) { slide.style.left=parseInt(slide.style.left)-4000+"px"; curIndex=4; }; toggled=true; }; }; if (toggled==true) { toggled=false; button[curIndex].className="button"; if (curIndex!=0) { button[curIndex-1].className="button on"; }else{ button[curIndex+4].className="button on"; } var interval=setInterval(leftStep,TIMER); }; }; var rightToggle=function () { var t2=times; function leftStep(){ slide.style.left=parseInt(slide.style.left)-stepLenth+"px"; t2--; if (!t2) { clearInterval(interval); curIndex++; if (curIndex>4) { slide.style.left=parseInt(slide.style.left)+4000+"px"; curIndex=0; }; toggled=true; }; }; if (toggled==true) { toggled=false; button[curIndex].className="button"; if (curIndex!=4) { button[curIndex+1].className="button on"; }else{ button[curIndex-4].className="button on"; }; var interval=setInterval(leftStep,TIMER); }; } this.leftToggle=leftToggle;//输出对外的接口 this.rightToggle=rightToggle; }; var toggle=new Toggle(); prev.onclick=function () { toggle.leftToggle(); }; next.onclick=function () { toggle.rightToggle(); }; /* 点击圆圈跳转功能 */ for (var i = 0; i < button.length; i++) { button[i].onclick=function () { var newIndex=parseInt(this.getAttribute("index")); if (newIndex!=curIndex) { var distance=-800*(newIndex-curIndex); slide.style.left=parseInt(slide.style.left)+distance+"px"; button[curIndex].className="button"; button[newIndex].className="button on"; curIndex=newIndex; }; }; } /* 自动播放功能，鼠标移上去停止播放，移开再次播放 */ var intervalo=setInterval(toggle.rightToggle,3000); view.onmouseover=function () { clearInterval(intervalo); } view.onmouseout=function () { intervalo=setInterval(toggle.rightToggle,3000); } </script> </body> </html>
五、一些总结