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

来源：互联网发布：网络用语rz是什么意思编辑：程序博客网时间：2024/06/05 00:54

一知识点

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>

阅读全文

0 0