js实现点击切换图片用数组实现效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			li{
				display: none;
			}
			img{
				vertical-align: top;
			}
			#wrap{
				position: relative;
				width: 380px;
				margin: 20px auto;
				border: 5px solid #005DB0;
			}
			#p{
				position: absolute;
				top: 0;
				width: 100%;
				text-align: center;
				font-size: 20px;
				line-height: 2;
				color: #fff;
				background: rgba(255,0,0,.4);
			}
			.menu{
				position: absolute;
				bottom: 5px;
				width: 100%;
				text-align: center;
			}
			.menu>span{
				display: inline-block;
				width: 20px;
				height: 20px;
				font-size: 15px;
				line-height: 20px;
				color: #fff;
				background: #0000FF;
				cursor: pointer;
			}
			.active{
				background: red!important;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var aDiv = document.getElementById('list');
				var aImg = document.getElementById('img');
				var aP = document.getElementById('p');
				var aSp = document.querySelectorAll('.menu span');
				// console.log(aUl,aLi,aP,aSp);
				var arr = ['美女1','美女2','美女3',];
				var arrImg = ['images/pic01.jpg','images/pic02.jpg','images/pic03.jpg',];
				// console.log(arr);
				for(var i = 0; i < aSp.length; i++){
					aSp[i].index = i;
					aSp[i].onclick = function(){
						for(var i = 0; i < aSp.length; i++){
							aSp[i].className = '';
							// aImg.src = '';
							// aP.innerHTML = '';
						}
						aSp[this.index].className = 'active';
						aImg.src = arrImg[this.index];
						aP.innerHTML = arr[this.index];
					}
				}
				
				
				
			}
		</script>
	</head>
	<body>
		<div id="wrap">
			<div id="list">
				<img id="img" src="images/pic01.jpg" >
			</div>
			<p id="p">美女1</p>
			<div class="menu">
				<span class="active">1</span>
				<span>2</span>
				<span>3</span>
			</div>
		</div>
	</body>
</html>

 

posted @ 2022-11-18 15:18  JackieDYH  阅读(7)  评论(0)  编辑  收藏  举报  来源