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{margin:0;padding:0;}  table {border-collapse:collapse;border-spacing:0;}  fieldset,img {border:0;}  address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}  li {list-style:none;}  caption,th {text-align:left;}  h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}  q:before,q:after {content:'';}  abbr,acronym {border:0;font-variant:normal;}  sup {vertical-align:text-top;}  sub {vertical-align:text-bottom;}  input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}  input,textarea,select {font-size:100%;}  legend {color:#000;}

2)index.css

 @charset "utf-8";*{ margin: 0; padding: 0; text-decoration: none;}body { padding: 20px;}#container { width: 400px; height: 400px; overflow: hidden; position: relative;}#list { width: 2800px; height: 400px; position: absolute; z-index: 1;}#list img { float: left;}#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 150px;}#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}#buttons .on {  background: orangered;}.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}.arrow:hover { background-color: RGBA(0,0,0,.7);}#container:hover .arrow { display: block;}#prev { left: 20px;}#next { right: 20px;}

3)Focous.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点图轮播</title><link rel="stylesheet" href="css/cssReset.css"><link rel="stylesheet" href="css/index.css"><script type="text/javascript">window.οnlοad=function(){var container=document.getElementById("container");var list=document.getElementById("list");var buttons = document.getElementById("buttons").getElementsByTagName("span");var prev=document.getElementById("prev");var next=document.getElementById("next");var index=1;var animated=false;//判断图片是否还在轮播var PIC_LENGTH = 400;var len=5;//根据index的值对应点亮buttonfunction showButton(){for (var i = 0; i < buttons.length; i++) {if(buttons[i].className=='on'){buttons[i].className='';break;}}buttons[index-1].className='on';}//改变left的值实现轮播特效function animate(offset){animated=true;var time=300;//位移总时间var interval=10;//每次位移时间间隔var speed=offset/(time/interval);//位移速度var newleft=parseInt(list.style.left)+offset;function go(){//如果速度小于0且位置大于目标值if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){list.style.left=parseInt(list.style.left)+speed+'px';//settimeout只执行一次，是因为有递归，才控制它执行的次数setTimeout(go,interval); }else{list.style.left=newleft+"px";//如果位移达到目标值，就将left值改为现在的目标值//再进行判断目标值知否超出最左边的或最右边的if(newleft>-PIC_LENGTH){list.style.left=-len*PIC_LENGTH+'px';}if(newleft<-len*PIC_LENGTH){list.style.left=-1*PIC_LENGTH+'px';}animated=false;}}go();}// setinterval每隔三秒执行一次，可以一直执行。实现自动播放,// 将定时器加到timer上function play(){timer = setInterval(function(){next.onclick();},3000)}function stop(){clearInterval(timer);}container.οnmοuseοver=stop;container.οnmοuseοut=play;play();//当鼠标什么都不做时，自动播放//箭头点击事件next.οnclick=function(){if (animated) {return;}if(index==len){index=1;}else{index += 1;}if (!animated) {animate(-1*PIC_LENGTH);}//调用函数改变left值,从而移动图像     showButton();}prev.οnclick=function(){if (animated) {return;}if(index==1){index=len;}else{index -= 1;}if (!animated) {animate(PIC_LENGTH);}showButton();}//button点击事件for (var i = 0; i < buttons.length; i++){buttons[i].onclick = function(){if (animated) {return;}if(this.className=="on"){return;}var myIndex = this.getAttribute("index");// 这里的index属性是自定义的属性不能通过this.//index来获取，只能通过getattribute来获取。//这里的index为全局变量var offset = -1*PIC_LENGTH*(myIndex-index);animate(offset);index=myIndex;showButton();}}}</script>
</head>
<body><div id="container"><div id="list" style="left:-400px;"><img src="img/5.jpg" height="400" width="400" alt="1"><img src="img/1.jpg" height="400" width="400" alt="1"><img src="img/2.jpg" height="400" width="400" alt="2"><img src="img/3.jpg" height="400" width="400" alt="3"><img src="img/4.jpg" height="400" width="400" alt="4"><img src="img/5.jpg" height="400" width="400" alt="5"><img src="img/1.jpg" height="400" width="400" alt="5"></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a></div>
</body>
</html>