JS实现焦点图轮播效果的方法详解

本文实例讲述了JS实现焦点图轮播效果的方法。分享给大家供大家参考，具体如下：
效果图如下：

一、所用到的知识点
1.DOM操作
2.定时器
3.事件运用
4.Js动画
5.函数递归
6.无限滚动大法
二、结构和样式

<div id="banner" class="banner"><ul id="list-banner" class="list-banner fn-clear" style="left:-624px;"><li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li><li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li><li><a href="#"><img src="images/banner2.jpg" width="624" height="200" alt="" title="" /></a></li><li><a href="#"><img src="images/banner3.jpg" width="624" height="200" alt="" title="" /></a></li><li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li><li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li></ul><div class="list-num-wp"><div id="list-num" class="list-num fn-clear"><a href="#" class="hover"></a><a href="#"></a><a href="#"></a><a href="#"></a></div></div><div class="left"><a id="left" href="#"></a></div><div class="right"><a id="right" href="#"></a></div></div>

.banner{position:relative;width:624px;height:200px;overflow:hidden;}.banner .list-banner{position:absolute;width:5000px;}.banner .list-banner li{float:left;width:624px;height:200px;}.banner .list-num-wp{position:absolute;bottom:7px;width:624px;height:11px;}.banner .list-num{width:100px;margin:0 auto;}.banner .list-num a{display:inline;float:left;width:11px;height:11px;margin:0 7px; background:url（../images/list-num.png） no-repeat;}.banner .list-num a:hover{background:url（../images/list-num-hover.png））;}.banner .list-num a.hover{background:url（../images/list-num-hover.png）;}.banner .left a{display:block;position:absolute;width:49px;height:49px;top:75px;left:4px;background:url（../images/arrow.gif） 0 0;filter: Alpha（opacity=50）;-moz-opacity:.5;opacity:0.5;}.banner .right a{display:block;position:absolute;width:49px;height:49px;top:75px;right:4px;background:url（../images/arrow.gif） 0 -49px;filter: Alpha（opacity=50）;-moz-opacity:.5;opacity:0.5;}

三、脚本思路
1.先左右按钮功能

window.onload=function（）{var prev=document.getElementById（"left"）;var next=document.getElementById（"right"）;var list_banner=document.getElementById（"list-banner"）;next.onclick=function（）{list_banner.style.left=parseInt（list_banner.style.left）-624+"px";//注：html上的ul要加行间样式left:0;，否则这里动不起来}prev.onclick=function（）{list_banner.style.left=parseInt（list_banner.style.left）+624+"px";}}

2.左右按钮点击的两句话很像，封装成函数

function animate（offset）{list_banner.style.left=parseInt（list_banner.style.left）+offset+"px";}next.onclick=function（）{animate（-624）;}prev.onclick=function（）{animate（624）;}

3.无限滚动
①假图的做法
即图片为412341，小于最后一张位置的时候，回到第一张的位置，大于第一张位置的时候，拉到最后一张的位置

function animate（offset）{var newLeft=parseInt（list_banner.style.left）+offset;list_banner.style.left=newLeft+"px";if（newLeft<-2496）{list_banner.style.left=-624+"px";}if（newLeft>-624）{list_banner.style.left=-2496+"px";}}

4.小圆点跟着左右按钮切换

var index=1;function showDot（）{for（var i=0;i<list_num.length;i++）{list_num[i].className="";}list_num[index-1].className="hover";}next.onclick=function（）{animate（-624）;index++;if（index>4）{index=1;}showDot（）;}prev.onclick=function（）{animate（624）;index--;if（index<1）{index=4;}showDot（）;}

5.点击小圆点图片滚动及小圆点切换

for（var i=0;i<list_num.length;i++）{list_num[i].onclick=function（）{if（this.className=="hover"）{return;}var myIndex=parseInt（this.getAttribute（"index"））;var offset=-624*（myIndex-index）;index=myIndex;animate（offset）;showDot（）;}}

①点自己的时候不执行下列代码
②

<div class="list-num-wp"><div id="list-num" class="list-num fn-clear"><a index="1" href="#" class="hover"></a><a index="2" href="#"></a><a index="3" href="#"></a><a index="4" href="#"></a></div></div>

关键是要取到点击的是第几张图片，不能直接var myIndex=this.index;因为index是自定义属性，dom自带属性可以通过点来获取，自定义属性不行，.getAttribute（）既可以获取自定义属性，又可以获取dom自带属性
③更新index值，index=myIndex;
6.动画函数（有一个渐变的运动过程）

function animate（offset）{animated=true;var newLeft=parseInt（list_banner.style.left）+offset;var time=300; //位移总时间var interval=30;//位移间隔时间var speed=offset/（time/interval）;//每次移动距离speed=speed>0?Math.ceil（speed）:Math.floor（speed）;//可能存在小数，取整function go（）{if（（speed < 0 && parseInt（list_banner.style.left）>newLeft）||（speed>0&&parseInt（list_banner.style.left）<newLeft））{ //newLeft目标值list_banner.style.left=parseInt（list_banner.style.left）+speed+"px";setTimeout（go,interval）;//不止做一次运动（go函数），每隔30毫秒前进一下}else{animated=false;list_banner.style.left=newLeft+"px";if（newLeft<-2496）{list_banner.style.left=-624+"px";}if（newLeft>-624）{list_banner.style.left=-2496+"px";}}}go（）;}next.onclick=function（）{if（！animated）{index++;}if（index>4）{index=1;}showDot（）;if（！animated）{animate（-624）;}}prev.onclick=function（）{if（！animated）{index--;}if（index<1）{index=4;}showDot（）;if（！animated）{animate（624）;}}for（var i=0;i<list_num.length;i++）{list_num[i].onclick=function（）{if（this.className=="hover"）{return;}var myIndex=parseInt（this.getAttribute（"index"））;var offset=-624*（myIndex-index）;index=myIndex;showDot（）;if（！animated）{animate（offset）;}}}

①一个函数不停地在一个条件后调用自身，这种做法就叫做递归，这里通过递归可以实现animate这个函数的动画效果
②不停点就意味着不停调用animate函数，可能会造成卡顿，图片乱刷，需要优化，引进变量animated
7.自动播放

function autoplay（）{timer=setInterval（function（）{next.onclick（）;},1000）}function stopautoplay（）{clearInterval（timer）;}banner.onmouseover=stopautoplay;banner.onmouseout=autoplay;autoplay（）;

setTimeout只执行一次，之前一直执行，是因为递归
setInterval是每隔多少时间
8.假图的优化
实际运用中，图片肯定是按顺序存放，所以假图最好通过js来生成，而不是本身写在html上

var img_first=list_banner.getElementsByTagName（"li"）[0];var img_last=list_banner.getElementsByTagName（"li"）[3];list_banner.appendChild（img_first.cloneNode（true））;list_banner.insertBefore（img_last.cloneNode（true）,list_banner.getElementsByTagName（"li"）[0]）;

appendChild是将新的节点添加到目标的最后一个子节点之后
insertBefore是将新的节点添加到已存在的子节点之前
cloneNode方法，true表示深克隆，false表示浅克隆，深克隆是将标签和标签里的内容都复制过来，而浅克隆不复制内容
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。