JavaScript索引图片切换

最新推荐文章于 2024-06-27 12:49:37 发布

Lvdon9

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量356

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37995109/article/details/85423864

版权

JavaScript 专栏收录该内容

106 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<style>
			ul {
				padding: 0;
				margin: 0;
			}
			
			li {
				list-style: none;
			}
			
			body {
				background: #333;
			}
			
			#pic {
				width: 400px;
				height: 500px;
				position: relative;
				margin: 0 auto;
				background: url(img/loader_ico.gif)no-repeat center;
			}
			
			#pic img {
				width: 400px;
				height: 500px;
			}
			
			#pic ul {
				position: absolute;
				top: 0;
				right: -50px;
			}
			
			#pic li {
				width: 40PX;
				height: 40PX;
				margin-bottom: 4px;
				background: #666;
			}
			
			#pic .active {
				background: #FC3;
			}
			
			#pic span {
				top: 0;
			}
			
			;
			#pic p {
				bottom: 0;
			}
			
			#pic p,
			#pic span {
				width: 400PX;
				height: 30PX;
				text-align: center;
				color: #fff;
				position: absolute;
				left: 0;
			}
		</style>
		<script>
			window.onload = function() {
				var oDiv = document.getElementById('pic');
				var olmg = oDiv.getElementsByTagName('img')[0];
				var ospan = oDiv.getElementsByTagName('span')[0];
				var op = oDiv.getElementsByTagName('p')[0];
				var arrUrl = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png'];
				var arrText = ['i', '2', '3', '4 '];
				var oUl = oDiv.getElementsByTagName('ul')[0];
				var aLi = oUl.getElementsByTagName('li');
				var num = 0;
				
				var oldLi=null;
				//初始化
				for(var i = 0; i < arrUrl.length; i++) {
					oUl.innerHTML += '<li></li>';
				};
				oldLi=aLi[num];
				//改变照片。
				olmg.src = arrUrl[num];
				ospan.innerHTML = 1 + num + '/' + arrUrl.length;
				op.innerHTML = arrText[num];
				//第0个li加上 class
				aLi[num].className = 'active';

				for(var i = 0; i < aLi.length; i++) {
					aLi[i].index = i; //索引值
					aLi[i].onclick = function() {
						//更改照片src = 1，2，3，4
						//拿到arrUrl里面的第一个，第二个。 img/1.png
						olmg.src = arrUrl[this.index];
						//文字
						op.innerHTML = arrText[this.index];
						//第几张
						ospan.innerHTML = 1 + this.index + '/' + arrUrl.length;
						/*for(var i = 0; i < aLi.length; i++) {
							aLi[i].className = '';
						}
						this.className = 'active';*/
						oldLi.className='';
						oldLi=this;
						this.className='active';
					}
				}
			}
		</script>
	</head>

	<body>
		<div id="pic">
			<img src="" />
			<span>数量加载中。。。。 </span>
			<p>正在加载中。。。。</p>
			<ul>

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

</html>