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

效果图如下：

一、所用到的知识点

1.DOM操作

2.定时器

3.事件运用

4.Js动画

5.函数递归

6.无限滚动大法

二、结构和样式

.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.οnlοad=function(){

var prev=document.getElementById("left");

var next=document.getElementById("right");

var list_banner=document.getElementById("list-banner");

next.οnclick=function(){

list_banner.style.left=parseInt(list_banner.style.left)-624+'px'; //注：html上的ul要加行间样式left:0;，否则这里动不起来

}

prev.οnclick=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.οnclick=function(){

animate(-624);

}

prev.οnclick=function(){

animate(624);

}

3.无限滚动

①假图的做法

即图片为412341，小于最后一张位置的时候，回到第一张的位置，大于 第一张位置的时候，拉到最后一张的位置

function animate(offset){

var newLeft=parseInt(list_banner.style.left)+offset;

list_banner.style.left=newLeft+'px';

if(newLeft

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[i].className="";

}

list_num[index-1].className="hover";

}

next.οnclick=function(){

animate(-624);

index++;

if(index>4){

index=1;

}

showDot();

}

prev.οnclick=function(){

animate(624);

index--;

if(index<1){

index=4;

}

showDot();

}

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

for(var i=0;i

list_num[i].οnclick=function(){

if(this.className=="hover"){

return;

}

var myIndex=parseInt(this.getAttribute("index"));

var offset=-624*(myIndex-index);

index=myIndex;

animate(offset);

showDot();

}

}

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

②

关键是要取到点击的是第几张图片，不能直接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)

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

list_banner.style.left=-624+"px";

}

if(newLeft>-624){

list_banner.style.left=-2496+"px";

}

}

}

go();

}

next.οnclick=function(){

if(!animated){

index++;

}

if(index>4){

index=1;

}

showDot();

if(!animated){

animate(-624);

}

}

prev.οnclick=function(){

if(!animated){

index--;

}

if(index<1){

index=4;

}

showDot();

if(!animated){

animate(624);

}

}

for(var i=0;i

list_num[i].οnclick=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.οnmοuseοver=stopautoplay;

banner.οnmοuseοut=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程序设计有所帮助。