由于现在很多网站都有轮播图的存在，所以自己的学着来捣鼓一下下，内容有点长！
（1）、首先要先制作好html页面，利用div盒子来布局
<div id="box" class="all">
<div class="screen">
<ul>
<li><img src="images/wf1.jpg" width="500" height="200" alt="1"></li>
<li><img src="images/wf2.jpg" width="500" height="200" alt="2"></li>
<li><img src="images/wf3.jpg" width="500" height="200" alt="3"></li>
<li><img src="images/wf4.jpg" width="500" height="200" alt="4"></li>
<li><img src="images/wf5.jpg" width="500" height="200" alt="5"></li>
</ul>
<ol></ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
首先先一个大的div盒子，然后它里面有两个子元素也是div，第一个div里面放着无序列表ul和有序的列表ol，而ul里面有五个li且每一个li里面都包含着img标签。而ol标签则是存放着序号，它的里面的li标签则是根据img标签的个数来创建多少个li标签。
1. 样式的设置
（1）、 利用css样式来修饰网页。首先先取消网页的原来样式，然后设置最外层的大盒子div的样式，宽度设置为500px，高度设置为200px，设置内边距，设置盒子的边框，最重要的是要记的脱离文档流，盒子的定位position。在设置它的第一个子元素的样式，宽度和高度均和父元素的一样，还要设置里面元素超出这个宽、高度范围的处理，选择隐藏处理，且定位也得设置等等。（这里就不在说了，后面有代码贴上[认真脸]）
2. Js技术的实现
（1）、获取需要的元素
比如最外层的div盒子、父元素的两个子元素div、第一个子元素的里面ul标签、ul标签里面的li标签、li标签的img元素、第二个子元素的div、以及这里面的向左、向右的标签。
（2）、动态生成序号
在ol标签里面动态生成li标签，并设置li标签里面的innerText值（不考虑兼容性），这里面的值就是序号，然后获取图片的个数遍历用来设置li标签的值即序号，并且在这中间注册点击事件，当点击到哪个序号，图片就会以动画的形式移动该位置（动画的函数疯转起来）。在创建li的过程中我们需要给li对象设置属性index，用来记录自己的索引值，以便后面的操作能够有所方便，默认第一张的图片的序号高亮显示，由于点击事件是在动态创建li的过程注册的，所以我们单独的把这个事件抽出来封装成一个函数。
（3）、显示下一张/上一张的箭头
当鼠标的移动最外层的div上的时候就显示两个箭头，设置样式的display为block；当鼠标离开的时候就隐藏这两个箭头，设置样式的display为none。
（4）、点击下一张的箭头切换图片
定义一个变量index=0，需要给下一张的箭头注册点击事件（每点击一次index的值就加一），先实现一张张的图片切换不考虑当切换到最后一张的时候，再点击箭头的操作（先实现简单的操作），这里的一张张图片的切换其实就是图片以动画的形式移动到指定的位置，我们使用移动的函数来实现切换，这样就能实现了操作。当需要考虑刚刚说的情况的时候，我们就复制了第一张的图片，并且放在ul中。然后进行接下来的下一张图片的操作，首先判断index是否等于了图片的个数count（为5）了，相等了就是到了图片的最后一张了即克隆的那一张图片，然后我么偷偷的把index设置为0且设置样式left为0，就是回到了第一张图片那里。判断完之后就进行了index++,再判断index是否小于count，小于进行 ol.children[index].click()，相当于当前的序号被人点击了，实现高亮显示。else呢，以动画的方式切换图片并循环遍历取消所有的序号高亮显示，后设置当前的index所在的序号高亮显示。
上一张的切换：先判断是否是第一张图片，是的话就进行设置index=count（到最后一张的克隆照片上去）且修改样式的left为最后一张的克隆照片位置。再接下来index减一，ol.children[index].click()，相当于该序号被人点击了。
（5）、自动播放图片
利用定时器setInterval()来实现var time=setInterval(function(){
arrRight.click();
},interval)；
当自动播放图片的时候，鼠标移到最外层的盒子上时，需要停止定时器clearInterval(time)，离开的时候需要开启定时器。所以应该在（3）那里加进去。
感谢dalao的耐心观看，有点多，望海涵！
html代码:
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
</head>
<body>
<div id="box" class="all">
<div class="screen">
<ul>
<li><img src="images/wf1.jpg" width="500" height="200" alt="1"></li>
<li><img src="images/wf2.jpg" width="500" height="200" alt="2"></li>
<li><img src="images/wf3.jpg" width="500" height="200" alt="3"></li>
<li><img src="images/wf4.jpg" width="500" height="200" alt="4"></li>
<li><img src="images/wf5.jpg" width="500" height="200" alt="5"></li>
</ul>
<ol></ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>css代码:
*{
margin:0;
padding:0;
list-style: none;
border:0;
}
.all{
width:500px;
height:200px;
padding:7px;
border:2px solid #ccc;
margin:150px auto;
position:relative;
}
.screen{
width:500px;
height:200px;
overflow: hidden;
position:relative;
}
.screen li{
width:500px;
height:200px;
overflow: hidden;
float: left;
}
.screen ul{
left:0;
top:0;
/*六张图片500px一张*/
width:3000px;
/*记得脱离文档流*/
position: absolute;
}
.all ol{
/*序号的样式*/
right:10px;
bottom:10px;
line-height: 20px;
text-align:center;
position:absolute;
}
.all ol li{
width:20px;
height:20px;
background: #fff;
border:1px solid #ccc;
margin-left:10px;
cursor: pointer;
float: left;
}
.all ol li.current{
background:yellow;
}
#arr{
display: none;
z-index: 1000;
}
#arr span{
width: 40px;
height:40px;
position: absolute;
left: 5px;
top:50%;
margin-top:-20px;
background:#000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}js代码:
<script type="text/javascript">
//先获取元素
var box=document.getElementById('box');
var screen=box.children[0];
var ul=screen.children[0];
var ol=screen.children[1];
//获取箭头
var arr=box.children[1];
var arrLeft=arr.children[0];
var arrRight=arr.children[1];
//动态生成序号
//获取图片的个数
var count=ul.children.length;
//获取图片的大小
var imgWidth=screen.offsetWidth;
//设置定时器的时间间隔（为了好维护才这样写的）
var interval=5000;
var i=0;
for(;i<count;i++){
//创建序号
var li=document.createElement('li');
// 往ol中添加li并且设置li的值不考虑兼容性问题
ol.appendChild(li);
li.innerText=i+1;
//3-看可以通过点击序号显示对应的图片
//li记录自己的索引值 给li对象添加属性，该标签不能访问到的
li.index=i;
//3.1给li注册点击事件
li.onclick=liClick;
//让第一个序号默认选中
if(i===0){
li.className='current';
}
}
//点击函数
function liClick(){
//让图片以动画的形式移动
anint(ul,-this.index * imgWidth);
//取消所有li的高粱显示，让当前的li高粱显示
for(i=0;i<count;i++){
li=ol.children[i];
li.className='';
}
this.className='current';
//点击序号li，重新记录全局的index
index=this.index;
}
//鼠标经过显示箭头
box.onmouseover=function(){
arr.style.display='block';
clearInterval(time);
}
box.onmouseout=function(){
arr.style.display='none';
//鼠标离开的时候开启定时器
time=setInterval(function(){
arrRight.click();
},interval)
}
//鼠标点在箭头切换图片
//实现箭头上一张和下一张的功能
var index=0;
//4.1下一张的切换
arrRight.onclick=function(){
//看克隆第一张图片用于最后照片的切换的时候切换到第一张
if(index===count){//当切换到最后一张的图片的时候
//偷偷修索引值 且切换回第一张
index=0;
ul.style.left='0px';
}
index++;
if(index<count){
// anint(ul,-index*imgWidth);
//让对应的序号高亮显示（就是当前的序号被点击了一次）
ol.children[index].click();
}else{
//以动画的方式切换到克隆的第一张图片
anint(ul,-index*imgWidth);
//取消所有的序号li的高亮显示
for(i=0;i<count;i++){
li=ol.children[i];
li.className='';
}
//第一张的li高亮显示
ol.children[0].className='current';
}
}
//上一张的切换
arrLeft.onclick=function(){
//当是第一张图片的时候，就偷偷的切换到克隆的那张图片上去
if(index===0){
index=count;//最后一张图片
ul.style.left=-index*imgWidth+'px';
}
index--;
if(index>=0){
ol.children[index].click();
}
}
//无缝滚动
//复制第一个li，并且添加到ul的后面
var cloneLi=ul.children[0].cloneNode(true);
ul.appendChild(cloneLi);
//自动显示图片
//图片移动的函数(element要移动的元素 target 移动到的位置 callback回调函数)
function anint(element,target,callback){
if(element.time){
//解决多次点击是的盒子快速移动的问题
clearInterval(element.time);
}
element.time=setInterval(function(){
var step=5;
var current=element.offsetLeft;
// var target=target;
if(current>target){
step=-Math.abs(step);
}
if(Math.abs(current-target)<=Math.abs(step)){
element.style.left=target+'px';
clearInterval(element.time);
if(callback){//使用回调函数
callback();
}
return;
}
current+=step;
element.style.left=current+'px';
},20);
}
var time=setInterval(function(){
arrRight.click();
},interval)
</script>