Web前端开发 - 制作简单的焦点图效果

任务描述

焦点图效果是各大网站常用的效果，下面利用数组实现简单的焦点图效果，页面上5张图片2秒轮换显示，单击向右图片实现播放下一张图片，图片向后继续2秒轮换显示，单击向左图片实现播放上一张图片，图片向前继续2秒轮换显示。

编辑

任务分析

样例代码：

任务描述

焦点图效果是各大网站常用的效果，下面利用数组实现简单的焦点图效果，页面上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>