<strong><span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图 函数调用及闭包应用</title>
<style>
*{margin:0;padding:0;list-style:none;font-family:"微软雅黑";}
.box{width:1000px;height:409px;border:7px solid #ccc;margin:0 auto;}
.box ul{list-style:none;}
.box ul li{display:none;}/*隐藏所有的li*/
.box ul li.cur{display:block;}/*显示鼠标当前的li*/
.dian{overflow:hidden;position:absolute;top:360px;left:920px;z-index:11}
.dian span{display:block;width:20px;height:20px;margin-right:8px;background-color:#fff;float:left;cursor:pointer;text-align:center;}
.dian span.active{background-color:red;}
#next,#prev{width:90px;height:90px;background:#ccc;
color:#fff;text-align:center;line-height:90px;
font-size:60px;position:absolute;top:160px;cursor:pointer;;
z-index:10px;filter:alpha(opacity=50);opacity:0.5;}
#next:hover{filter:alpha(opacity=70);opacity:0.7;}
#prev:hover{filter:alpha(opacity=70);opacity:0.7;}
#next{left:1100px;}
</style>
<script>
window.οnlοad=function(){
var oBox=document.getElementById('Box');
var oPrev=document.getElementById('prev');
var oNext=document.getElementById('next');
var oLi=oBox.getElementsByTagName("li");
var oDian=document.getElementById("dian");
var oSpan=oDian.getElementsByTagName("span");
var now=0;
for(var i=0;i<oSpan.length;i++){
(function(index){
oSpan[i].οnclick=function(){
for(var i=0;i<oSpan.length;i++){
oSpan[i].className=oLi[i].className="";
}
this.className="active";
oLi[index].className="cur";
}
})(i);//封闭空间形式
}
oNext.οnclick=function(){
next();
}
oPrev.οnclick=function(){
now--;
if(now==-1){
now=oSpan.length-1;
}
tab();
}
function next(){
now++;
if(now==oSpan.length){
now=0;
}
tab();
}
function tab(){
for(var i=0;i<oSpan.length;i++){
oSpan[i].className=oLi[i].className="";
}
oSpan[now].className="active";
oLi[now].className="cur";
}
/*定时器应用*/
var timer=setInterval(next,2000);//每2000毫秒切换一张
oBox.οnmοuseοver=function(){//鼠标移上轮播图区域停止切换
clearInterval(timer);
}
oBox.οnmοuseοut=function(){//鼠标移开轮播图区域恢复切换
timer=setInterval(next,2000);
}
};
</script>
</head>
<body>
<div class="box" id="Box">
<div id="prev"><</div>
<ul>
<li class="cur"><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
</ul>
<div class="dian" id="dian">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div id="next">></div>
</div>
</body>
</html></span></strong>
轮播图系列教程(四)自动切换,定时器应用——和派孔明
最新推荐文章于 2021-05-30 18:48:28 发布