JS自定义属性之切换图片事件

来源：互联网发布：软件系统推广方案编辑：程序博客网时间：2024/06/05 16:28

本篇是在前一篇图片切换的基础上实现功能，代码有一些繁琐将会在下一篇中对该篇进行优化。

<body><div id="pic"><img src=""  /><span>数量正在加载中....</span><p>文字说明正在加载中...</p><ul></ul></div><script>var oDiv=document.getElementById('pic');var oImg=oDiv.getElementsByTagName('img')[0];var oSpan=oDiv.getElementsByTagName('span')[0];var oP=oDiv.getElementsByTagName('p')[0];var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oDiv.getElementsByTagName('li');//这一堆代码都是定义变量来获取元素var arrUrl=['img/001.jpg','img/002.jpg','img/003.jpg','img/004.jpg','img/005.jpg'];//用数组来存放图片var arrText=['海贼王','树洞','魔法师','树荫','艾斯'];var num=0;var oldLi=null;for(i=0;i<arrUrl.length;i++){oUl.innerHTML+='<li></li>';//向ul中插入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;aLi[i].onclick=function(){oImg.src=arrUrl[this.index];oP.innerHTML=arrText[this.index];oSpan.innerHTML=1+this.index+'/'+arrText.length;for(var i=0;i<aLi.length;i++){aLi[i].className='';}this.className='active';/*oldLi.className='';oldLi=this;this.className='active';*/}}</script>

简化后的代码：

<script>var oDiv=document.getElementById('pic');var oImg=oDiv.getElementsByTagName('img')[0];var oSpan=oDiv.getElementsByTagName('span')[0];var oP=oDiv.getElementsByTagName('p')[0];var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oDiv.getElementsByTagName('li');var arrUrl=['img/001.jpg','img/002.jpg','img/003.jpg','img/004.jpg','img/005.jpg'];var arrText=['海贼王','树洞','魔法师','树荫','艾斯'];var num=0;for(i=0;i<arrUrl.length;i++){oUl.innerHTML+='<li></li>';}function fnTab(){oImg.src=arrUrl[num];oSpan.innerHTML=1+num+'/'+arrText.length;oP.innerHTML=arrText[num];for(i=0;i<arrUrl.length;i++){aLi[i].className='';}aLi[num].className='active';}fnTab();for(i=0;i<arrUrl.length;i++){aLi[i].index=i;aLi[i].onclick=function(){num=this.index;fnTab();}}</script>

0 0