js实现点击切换图片用li标签实现效果 

<!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 aUl = document.getElementById('list');
				var aLi = document.getElementsByTagName('li');
				var aP = document.getElementById('p');
				var aSp = document.querySelectorAll('.menu span');
				// console.log(aUl,aLi,aP,aSp);
				var arr = ['美女1','美女2','美女3',];
				// 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 = '';
							aLi[i].style.display = 'none';
							aP.innerHTML = '';
						}
						aSp[this.index].className = 'active';
						aLi[this.index].style.display = 'block';
						aP.innerHTML = arr[this.index];
					}
				}
				
				
				
			}
		</script>
	</head>
	<body>
		<div id="wrap">
			<ul id="list">
				<li style="display: block;"><img src="./images/pic01.jpg" alt="t"></li>
				<li><img src="./images/pic02.jpg" alt="t"></li>
				<li><img src="./images/pic03.jpg" alt="t"></li>
			</ul>
			<p id="p">美女1</p>
			<div class="menu">
				<span class="active">1</span>
				<span>2</span>
				<span>3</span>
			</div>
		</div>
	</body>
</html>

 

posted @ 2020-03-22 17:06  JackieDYH  阅读(35)  评论(0)  编辑  收藏  举报  来源