js基础自定义属性索引值之图片切换实例

来源：互联网发布：java catch return 编辑：程序博客网时间：2024/06/05 17:30

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{
background-color: #ccc;
}
#container{
width:300px;
height:400px;
position:relative;
margin:0 auto;
}
img{
width:300px;
height:400px;
}
ul{
margin:0;
padding:0;
list-style: none;
position:absolute;
top:5px;
left:320px;
}
li{
width:40px;
height:40px;
background-color: yellow;
margin-bottom: 5px;
}
li.active{
background-color:#fc3;
}
span{
width:300px;
height:30px;
line-height: 30px;
text-align:center;
color:#fff;
position:absolute;
top:0;
left:0px;
}
p{
margin:0;
padding:0;
width:300px;
height:30px;
line-height: 30px;
text-align:center;
color:#fff;
position:absolute;
bottom:10px;
left:0px;
}
</style>
<script>
//页面实现点击按钮切换对应的图片与下标
window.onload = function (){

var oImg=document.getElementsByTagName('img')[0];
var oSpan=document.getElementsByTagName('span')[0];
var oP=document.getElementsByTagName('p')[0];
var oSpan=document.getElementsByTagName('span')[0];
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var arrText=['图片一','图片二','图片三','图片四'];
var arrUrl=['img/1.png','img/2.png','img/3.png','img/4.png'];
var num=0;
var oldLi=null;//用来存放上一个的变量

for(var i=0;i<arrUrl.length;i++){
oUl.innerHTML+='<li></li>'
}
oldLi=aLi[num];

//初始化
oImg.src=arrUrl[num];
oSpan.innerHTML=1+num+"/"+arrUrl.length;
oP.innerHTML=arrText[num];
aLi[num].className='active';

for(var i=0;i<aLi.length;i++){
aLi[i].index=i//这一步很重要，给每个Li添加一个自定义索引
aLi[i].onclick=function(){//给每一个方块点击事件
oImg.src=arrUrl[this.index];//对应切换图片的src
oSpan.innerHTML=1+this.index+"/"+arrUrl.length;//对应切换span标签的内容
oP.innerHTML=arrText[this.index];//对应切换p标签的内容
//思路一：全部清空，当前添加
// for(var i=0;i<arrUrl.length;i++){
// aLi[i].className="";
// }
// this.className='active';
//思路二：清空上个，当前添加
oldLi.className='';//把上一个的清空
oldLi=this;//同时把当前附给上一个
this.className='active';//当前的类型切换

}
}

}
</script>
</head>

<body>
<div id="container">
<img src="img/1.png"/>
<span>数量正在加载中...</span>
<p>图片正在加载中..</p>
<ul>
</ul>
</div>
</body>
</html>

0 0