当前位置：首页 > news >正文

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

news 来源：原创 2025/5/23 9:26:48

任务描述

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

编辑

任务分析

样例代码：

任务描述

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

任务分析

1.设计HTML页面，应用CSS美化页面。

2.定义数组，将轮换显示的图片地址保存到数组中。

3.定义两个全局变量，一个变量用于控制定时器，另一个变量用于控制数组下标。

4.定义函数实现图片的轮换显示。在函数中改变图片的地址，使用定时器函数，2秒更换图片地址，实现图片的轮流显示。

5.单击上一张或下一张按钮时将定时器清除，再重新调用图片轮换显示函数

样例代码：


<!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++;elseindex=0;timer=setTimeout("showPic()",1000);}function showNext(){clearTimeout(timer);showPic();}function showPre(){clearTimeout(timer);showPrepic();}function showPrepic(){		if(index>0)index--;elseindex=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>