js实现图片画册（选项卡）-软通乐学

最新推荐文章于 2022-12-09 20:46:55 发布

Jasonwx123

最新推荐文章于 2022-12-09 20:46:55 发布

阅读量429

点赞数

分类专栏： javascript 文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/JsonWuxin/article/details/108291282

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相册(选项卡)</title>
		<style type="text/css">
			*{
				padding:0;
				maring:0;
			}
			ul {
				list-style:none;
				
			}
			ul li {
				float:left;
				margin:0 5px;
			}
			h2 {
				margin-left:15px;
			}
		</style>
	</head>
	<body>
		<div id="tabs">
			<h2>图片画册</h2>
			<ul>
				<li>
					<a href="">
						<img src="../img/1-small.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="">
					  <img src="../img/2-small.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="">
						<img src="../img/3-small.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="">
						<img src="../img/4-small.jpg" alt="" />
					</a>
				</li>
			</ul>
		</div>
		<div style="clear: both;"></div>
		<!--显示大图-->
		<img src="../img/1.jpg" alt="" id="bigImg" class="active"/>
		
	</body>
	<script>
		var liObj = document.getElementsByTagName('li');
		/*待显示图片集合(数组)*/
		var arrImg = ['../img/1.jpg','../img/2.jpg','../img/3.jpg','../img/4.jpg'];
		var bigImg = document.getElementById('bigImg');
		for(var i = 0 ;i < liObj.length;i++){
			liObj[i].index = i;
			liObj[i].onclick = function(){
				bigImg.src = arrImg[this.index];
				return false;
			}
		}
	</script>
</html>