目前来讲，在各大网站都会使用到焦点轮播图，因为它占用地方少，交互性好，是前端设计必须要掌握的技能之一。
原理：使用三层嵌套，最里层装载图片，图片需要浮动。最里层设置相对定位。然后再使用JavaScript设置一个定时器，每过一段时间便让最里层的块的left值改变。
而第二层则需要设置overflow：hidden；这个属性，否则将会导致这个层被子层撑大。不美观。
此图便为实现效果图。
下面先讲一讲如何布局。
首先布局分为三大块，一块为inner，包裹住所有的图片；一块为outer，决定展示的窗口；两个a标签为左右箭头；pagination块则包裹着下面的每一小块span标签；
wrap是最外面的块，控制着整个轮播图的位置。
然后，设置相关的样式。如图：
.wrap{
width:510px;//显示窗口大小
margin:20px auto;
}
#outer{//此样式代码必须全设，否则将无法成功
width:510px;//显示窗口大小，可用百分比代替
overflow: hidden;
position: relative;
left:0;
top:0;
}
#inner{
width:9999px;//为能装下所有图片
position: relative;
left:0;
top:0;
overflow: hidden;//清除浮动
}
#inner img{
float:left;
}
#outer a{//确定两个小箭头的位置
position: absolute;
width:30px;
height:30px;
font-size: 30px;
text-align: center;
line-height: 30px;
top:50%;
margin-top: -15px;
background-color: #ccc;
opacity: 0;
filter: alpha(opacity=0);
}
#outer .active{
background-color: #9f9f9f;
}
#outer:hover a{
opacity: 0.6;
filter: alpha(opacity=60);
}
#outer .leftGo{
left:0;
}
#outer .rightGo{
right:0;
}
#pagination{
position: absolute;
bottom: 20px;
width:100%;
text-align: center;
}
#pagination span{
display: inline-block;
width:30px;
height:30px;
line-height: 30px;
border-radius: 50%;
background-color: #fbfbfb;
opacity: 0.6;
filter: alpha(opacity=60);
cursor: pointer;
-webkit-user-select: none;
}
至此，相关的样式便设置完，我们开始进入高大上的Javascript。
首先我们思考整个页面将会发生的事件：
1.每过一段时间，最里层的inner的left就会改变。
2.每一个下标都对应着一个图片。当前显示图片改变，下标改变。
3.当点击下标时，当前显示图片改变成相对应的图片。
4.当鼠标移入到展示层，图片停止滑动，两边的箭头显示。当鼠标移出，回复滑动，两边的箭头虚化。
5.当鼠标点击左右两边的箭头，图片向前滑动/向后滑动；
当我们了解完基本的事件之后，我们便可以开始设置绑定相关的事件了。
1 timer = setInterval(AutoGo,2000);//设置计时器
2 leftGo.onclick=function(){
3 Goleft();//点击左边的小箭头
4 };
5 rightGo.onclick = function(){
6 Goright();//点击右边的小箭头
7 };
8 inner.onmouseover=function(){
9 clearInterval(timer);//鼠标移入，清除计时器
10 }
11 inner.onmouseleave=function(){
12 timer = setInterval(AutoGo,2000);//鼠标移出，启动计时器
13 }
14 function AutoGo(){
15 //自动轮播
16 var start =inner.offsetLeft;//距离左边的边框的长度
17 var end = - index * picWidth;//终点
18 var moveDistance = end - start;
19 var speed = 20;//要走的步数
20 var speedCount = 0;
21 clearInterval(AutoTimer);
22 //清除之前的计时器，否则会越走越快
23 clearInterval(timer);
24 AutoTimer = setInterval(function(){
25 speedCount++;
26 if(speedCount >=speed){
27 //步数足够
28 clearInterval(AutoTimer);
29 clearInterval(timer);
30 timer = setInterval(Goright,1000);
31 //再次启动计时器
32 }
33 inner.style.left = moveDistance * speedCount/speed +start+"px";
34 //每步要走的距离
35 },100)
36 for(var i = 0 ; i<spanArr.length;i++){
37 //下标的样式改变，以及点击事件的绑定
38 spanArr[i].index = i;
39 spanArr[i].className="";
40 spanArr[index].className="active";
41 spanArr[i].onclick =function(){
42 index=this.index;//传递当前点击的位置
43 AutoGo();
44 }
45 }
46 }
47 function Goleft(){
48 //往左走一步;
49 index--;
50 if(index<0){
51 index =imgArr.length-1;
52 }
53 AutoGo();
54
55 }
56
57 function Goright(){
58 //往右走一步
59 index++;
60 if(index>imgArr.length-1){
61 index =0;
62 }
63 AutoGo();
64 }
至此，相关的设置就完成了。
但是在此过程中有一些问题需要注意：
1.计时器在每次调用之前必须清除，否则当有多个事件触发的时候计时器会叠加，从而会越走越快。
2.一些重复的代码没必要重复写，应该要封装到函数里面去。
3.当对多个相同的元素进行操作时，注意不要让数组越界。
4.要考虑兼容性问题
5.要注意代码的格式化。
如若转载，请说明出处，谢谢