Web前端开发 - 制作简单的焦点图效果
目录
任务描述
焦点图效果是各大网站常用的效果，下面利用数组实现简单的焦点图效果，页面上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>