js之焦点图轮播特效

js之焦点图轮播特效

一.原理介绍

焦点图在网站很明显的位置，用图片组合播放的形式，类似焦点新闻的意思,只不过加上了图片。据国外的设计机构调查统计，网站焦点图的点击率明显高于纯文字。在很多购物网主页面可以看到。

二.样式布局——整体思路

1.小圆点buttons以及箭头arrow控制图片的显示。

2.一个container容器放上有7张图片的列表list，其中有两张图片和第一张还有最后一张相同，目的是为了实现无缝隙的滚动。

3.将鼠标移开container容器有自动播放的效果（实则是注册next.onclick事件）,将鼠标移进容器时停止播放。这两者使用定时器来实现。

优化工作：当显示的button与点击的button是同一个按钮时，不需要执行遍历buttons数组来清除颜色，直接return;。

注意事项：写代码之前最好搞懂position属性的使用，父元素设置为position:relative并不会脱离文档流，也就是说——利用给父元素设置position:relative属性，再将子元素设置为position:absolute就可以在文档流中实现需要的定位，此时子元素的定为是相对父元素定位的。参考链接：详细解读定位属性 position

可上慕课听完整教程，附上链接：

http://www.imooc.com/learn/18

三.代码实现

1)cssReset.css

   @charset "utf-8";
   html {color:#000;background:#FFF;}  
   body,div,dl,dt,dd,ul,ol,li,  
   h1,h2,h3,h4,h5,h6,  
   pre,code,form,fieldset,legend,  
   input,textarea,p,blockquote,th,td{marg