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

最新推荐文章于 2023-07-06 11:45:00 发布

cookielv

最新推荐文章于 2023-07-06 11:45:00 发布

阅读量495

点赞数

分类专栏：初战

本文链接：https://blog.csdn.net/qq_19004625/article/details/53617715

版权

初战专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

<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].οnclick=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].οnclick=function(){
					num=this.index;
					fnTab();
				}
			}
		</script>

cookielv

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS自定义属性之切换图片事件

本篇是在前一篇图片切换的基础上实现功能，代码有一些繁琐将会在下一篇中对该篇进行优化。数量正在加载中.... 文字说明正在加载中... var oDiv=document.getElementById('pic'); var oImg=oDiv.getElementsByTagName('img')[0];
复制链接

扫一扫