图片切换（二）(div+css+js)

最新推荐文章于 2024-09-30 14:28:41 发布

其实我不胖_csdn

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量356

点赞数

分类专栏： div+css+js 文章标签： javascript css

div+css+js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一知识点

1 getElementsByTagsName() ：此函数获取某个范围内的某个标签的集合。

2 动态添加标签： innerHTML ="<li></li>"; 动态添加a标签

3 自定义属性： index 。

4 this的用法：执行该方法的对象

二代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
 }
 ul{
	 list-style:none;
	 }
.content{
	width:300px;
	height:300px;
	position:relative;
	margin:30px auto;
	}
.content span{
	dispaly:block;
	height:30px;
	line-height:30px;
	text-align:center;
	width:300px;
	background-color:#000;
	position:absolute;
	top:0px;
	left:0px;
	color:#fff;
	fitler:alpha(opacity=50);
	opacity:0.5;
	}
.content img{
	width:300px;
	height:300px;
}
.content p{
	width:300px;
	height:30px;
	color:#fff;
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	fitler:alpha(opacity=50);
	opacity:0.5;
	line-height:30px;
	text-align:center;
	}
.content ul{
	position:absolute;
	left:100px;
	bottom:35px;
    width:200px;
	margin:0 auto;
	}
.content ul li{	
	width:20px;
	height:20px;
	background-color:#FF0;
	float:left;
	margin-right:10px;
	}

</style>
<script>
window.onload = function(){
	var oContent = document.getElementById("content");
	//getElementsByTagName()函数返回的是一个集合
	var arrUl = oContent.getElementsByTagName("ul");
    var arrMyImg = oContent.getElementsByTagName("img")[0];
	var arrP = oContent.getElementsByTagName("p");
	var arrSpan = oContent.getElementsByTagName("span");
	//初始化数据
	var arrImg =['img/1.jpg','img/2.jpg','img/3.jpg'];
	var arrTitle =['图片一','图片二','图片三'];
	//定义上一个激活的按钮
	var preBtn = null;
	for(var i=0 ; i<arrImg.length ; i++)
	{
	  arrUl[0].innerHTML +="<li></li>";
	}
	var arrLi = arrUl[0].getElementsByTagName("li");
	//初始化li的index值(index是自定义的属性)
    for(var i= 0 ; i<arrLi.length;i++)
	{
		 arrLi[i].index = i;
		 arrLi[i].onclick = function(){
			 arrSpan[0].innerHTML = this.index+1+" / "+arrImg.length;
			 arrMyImg.src = "img/"+((this.index)+1)+".jpg";
			 //arrP[0].innerHTML = arrTitle[i];错的，这里不能用i,匿名函数不能用 i ?
			 arrP[0].innerHTML = arrTitle[this.index];//这里的this 指被点击的li	
			 if(preBtn!=null)
			 {
				 preBtn.style.backgroundColor="#FF0";
			 }		
             this.style.backgroundColor="red";
			 preBtn = this;
			 }
	}
	
	
}
	
</script>
</head>

<body>
<div id ="content" class="content">
<span>1/4</span>
<img src="img/1.jpg"/>
<p>图片名称</p>
<ul>

</ul>
</div>
</body>
</html>