前端js练习大图滚动

最新推荐文章于 2022-09-04 14:02:03 发布

钱端攻城狮

最新推荐文章于 2022-09-04 14:02:03 发布

阅读量802

点赞数 2

分类专栏： js 文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/m0_54932975/article/details/123485801

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 520px;
				height: 350px;
				border: aquamarine 2px solid;
				margin: 20px auto;
				position: relative;
			}
			div img{
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
			}
			div img:first-child{
				opacity: 1;
			}
			
			.btn{
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 40px;
				border: none;
				text-align: center;
			}
			.btn p{
				display: inline-block;
				width: 60px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: gold;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/t1.png"/>
			<img src="img/t2.jpg"/>
			<img src="img/t3.jpg"/>
			<img src="img/t4.jpg"/>
			<img src="img/t5.jpg"/>
			<div class="btn">
			<p>图1</p>
			<p>图2</p>
			<p>图3</p>
			<p>图4</p>
			<p>图5</p>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var pArray = document.getElementsByTagName("p");
	var imgArray = document.getElementsByTagName("img");
	
	//定义变量 来记录下标
	var index = 0;
	for(var i = 0; i < pArray.length; i++){
		pArray[i].onclick = function(){
			//隐藏当前正在显示的图片!!
			imgArray[index].style.opacity = 0;
			pArray[index].style.backgroundColor = "gold";

			//查找下标i
			for(var j = 0; j < pArray.length; j++){
				if(this == pArray[j]){
					index = j;
					break;
				}
			}
			//按钮he图片下标一致
			imgArray[index].style.opacity = 1;
		    pArray[index].style.backgroundColor = "orange";

		}
	}
	
	
	
	
	
</script>

运行结果:
在这里插入图片描述
点击:

钱端攻城狮

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端js练习大图滚动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 520px; height: 350px; border: aquamarine
复制链接

扫一扫