您的位置：首页 > 其它

轮播图系列教程（三）函数调用及封闭空间形式案例——和派孔明

2016-04-02 15:02 429 查看 
<pre name="code" class="html"><pre name="code" class="html"><span style="font-size:24px;"><strong><!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.onload=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].onclick=function(){
for(var i=0;i<oSpan.length;i++){
oSpan[i].className=oLi[i].className="";
}
this.className="active";
oLi[index].className="cur";
}
})(i);//封闭空间形式
}
oNext.onclick=function(){
next();
}

oPrev.onclick=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";
}
};
</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></strong></span>
//注：本教程面向前端新手学员，请学有余了的朋友自觉添加定时器应用，让轮播图跑起来！


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航