不管是高校的网站还是电商的页面，焦点图的切换和轮播应该是一项不可或缺的应用。今天把焦点图轮播制作的技术要点做下笔记，以供日后查看。

一、结构层（HTML）

　　焦点图的HTML结构很简单，就是一个父容器（id=box），包含三个子容器，分别存放图片（id=pics）、底部按钮（id=dots）、作用切换箭头（class=turn）。加上样式后就是下图二的布局。

二、表示层（CSS）

　　页面的表现和风格总是离不开CSS。为叙述方便，后面采用id选择符名或类选择符名代表各p模块。

1.box

　　box作为父容器，是整个焦点图轮播结构在网页的直观表现，它的宽高就是要显示的图片的宽高。我将图片设置为宽600px、高400px，使父容器box居中显示，并加了阴影。样式大概都可以随自己爱好设置，但溢出一定要隐藏，定位一定要设置为相对定位，以使子容器的绝对定位准确。

#box{
 width: 600px;
 height: 400px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: hidden;
 position: relative;
 box-shadow: 10px 10px 5px #888;
}

2.pics

　　pics用于放置图片，因为是制作左右切换功能，高仍是一张图片的高，但宽=（展示的图片数量+2）*图片宽，原因在行为层再说明。

　　另外需要注意的是，由展示图片可知，pics在左右切换箭头和底部切换按钮的下层，所以z-index要设为1。

#pics{
 width: 5400px;
 height: 400px;
 position: absolute;
 z-index: 1;
}

3.dots

　　z-index设为2，置为上层显示；定位为绝对定位；其他样式随喜好。这里我设置了鼠标滑过的样式，以及配合js对应图片位置改变的样式（on）。

#dots{
 width: 120px;
 height: 10px;
 position: absolute;
 bottom: 25px;
 left: 40%;
 z-index: 2;
}
 
#dots span{
 width: 10px;
 height: 10px;
 float: left;
 margin-right: 5px;
 background: #333;
 border: solid 1px #FFF;
 border-radius: 50%;
 cursor: pointer;
}
 
#dots .on{background: orangered;}
#dots span:hover{background: orangered;}

4.turn

　　左右箭头的重要样式与dots一致，其他自定义。这里我设置了鼠标滑过box，才显现箭头。

.turn{
 width: 40px;
 height: 40px;
 color: #fff;
 background: orangered;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 opacity: 0.5;
 position: absolute;
 top: 180px;
 display: none;
 z-index: 2;
 cursor: pointer;
}
.turn:hover{opacity: 0.8;}
#box:hover .turn{display: block;}

　　至此页面的样式和布局完成，但行为层方法和功能的实现才是重点。

三、行为层（Javascript）

定义函数前，先在全局作用域中获得页面的节点。

1.图片切换动画　　

　　轮播图的核心方法，在于图片的切换动画。而此函数的重点，是接收一个位移量offset，然后改变pics相对于box的left值，从而对图片进行显示。

　　之前CSS设置的，box的宽为600px，但pics的宽却为5400px，由于box溢出隐藏，所以页面只会显示一张图片；通过接收具体位移量offset，改变left值（减去或加上n个图片宽度），就可以改变显示的图片。

　　此外还有两个问题，如果不设置图片切换的速度，图片就会整张整张的变换，没有进入切换的效果；而且如果不停的点击切换，就会消耗太多的内存造成电脑卡机，出现页面停在前一张图未切换完就出现下一张等情况。所以要对图片做一个速度处理，以及一张图片为切换完就不允许其他切换的设置。

2.箭头切换

　　在图片切换函数turn()基础上传入参数。因为是左右切换，所以每次直接传入一个图片宽度。向右切换传入-600，左切传入600。

　　这里要注意的就是，图片与底部按钮的同步，到两边的最后一张后参数的重置，以及是否允许切换的判断。

3.底部按钮实现

　　按钮与箭头的不同，在于点击它可以切换到任意一张图片，所以在对切换函数turn()传入参数前要先做一个计算。另外按钮对应样式的变化也不能忘记。

4. 自动播放

　　自动播放自然就是设置定时器和清除定时器的问题，这里不再赘述。

最后附上demo和源码链接：demo、源码。