目录
任务描述
焦点图效果是各大网站常用的效果，下面利用数组实现简单的焦点图效果，页面上5张图片2秒轮换显示，单击向右图片实现播放下一张图片，图片向后继续2秒轮换显示，单击向左图片实现播放上一张图片，图片向前继续2秒轮换显示。
任务分析
1.设计HTML页面，应用CSS美化页面。
2.定义数组，将轮换显示的图片地址保存到数组中。
3.定义两个全局变量，一个变量用于控制定时器，另一个变量用于控制数组下标。
4.定义函数实现图片的轮换显示。在函数中改变图片的地址，使用定时器函数，2秒更换图片地址，实现图片的轮流显示。
5.单击上一张或下一张按钮时将定时器清除，再重新调用图片轮换显示函数
样例代码：
javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实现带左右按钮控制焦点图片切换</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{
width: 800px;
margin: 0 auto;
padding-bottom: 50px;
}
#focus{
width: 800px;
height: 280px;
overflow: hidden;
position: relative;
}
#focus ul{
height: 380px;
position: absolute;
}
#focus ul li{
float: left;
width: 800px;
height: 280px;
overflow: hidden;
position: relative;
background: #000;
}
#focus ul li div{
position: absolute;
overflow: hidden;
}
#focus .preBtn{
width: 45px;
height: 100px;
left: 0;
top:90px;
background:url(images/spirte.png) no-repeat 0 0;
background-color:#000;
cursor: pointer;
opacity:0.4;
filter:alpha(opacity=40);
}
#focus .nextBtn{
width: 45px;
height: 100px;
right:0px;
top:90px;
background:url(images/spirte.png) no-repeat right top;
background-color:#000;
cursor: pointer;
opacity:0.4;
filter:alpha(opacity=40);}
</style>
<script type="text/javascript">
var picsArr=new Array();
picsArr[0]="images/01.jpg";
picsArr[1]="images/02.jpg";
picsArr[2]="images/03.jpg";
picsArr[3]="images/04.jpg";
picsArr[4]="images/05.jpg";
var timer,index=0;
window.onload=showPic;
function showPic(){
document.getElementById("pic").src=picsArr[index];
if(index<(picsArr.length-1))
index++;
else
index=0;
timer=setTimeout("showPic()",1000);
}
function showNext()
{
clearTimeout(timer);
showPic();
}
function showPre()
{
clearTimeout(timer);
showPrepic();
}
function showPrepic()
{
if(index>0)
index--;
else
index=4;
document.getElementById("pic").src=picsArr[index];
timer=setTimeout("showPrepic()",2000);
}
</script>
</head>
<body>
<div class="wrapper">
<div id="focus">
<ul>
<li><a href="#" target="_blank"><img src="images/01.jpg" alt="" id="pic"/></a>
<div class="preBtn" onclick="showPre()"></div>
<div class="nextBtn" onclick="showNext()"></div>
</li>
</ul>
</div>
</div>
</body>
</html>