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

最新推荐文章于 2021-08-31 21:57:29 发布

xyphf_和派孔明

最新推荐文章于 2021-08-31 21:57:29 发布

阅读量534

点赞数

分类专栏：常用特效 DOM&BOM操作文章标签： javascript BOM DOM 函数

本文链接：https://blog.csdn.net/xyphf/article/details/51043962

版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

常用特效

24 篇文章 0 订阅

订阅专栏

<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.ο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";
		}
};
</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>

//注：本教程面向前端新手学员，请学有余了的朋友自觉添加定时器应用，让轮播图跑起来！

xyphf_和派孔明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图系列教程（三）函数调用及封闭空间形式案例——和派孔明

轮播图函数调用及闭包应用*{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;}/*隐藏所有的
复制链接

扫一扫

专栏目录