js实现焦点图片

最新推荐文章于 2024-02-22 17:15:47 发布

加油中…………

最新推荐文章于 2024-02-22 17:15:47 发布

阅读量251

点赞数 2

分类专栏： js实现文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_71808304/article/details/126481613

版权

js实现专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			.box {
				width: 600px;
				height: 400px;
				margin: 50px auto;
				border: solid 10px #333;
				position: relative;
				background-color: #f00;
			}

			.box a {
				position: absolute;
				top: 50%;
				display: block;
				width: 30px;
				border: solid 5px #fff;
				background-color: #666;
				text-align: center;
				font-size: 28px;
				color: white;
				opacity: 0.4;
				font-weight: bold;
			}
			#prev {
				left: 10px;
			}
			#next {
				right: 10px;
			}
			.box a:hover {
				opacity: 0.8;
			}
			.box p {
				width: 600px;
				height: 30px;
				line-height: 30px;
				background-color: #333;
				color: white;
				position: absolute;
				text-align: center;
			}
			.box #picNum {
				top: 20px;
			}
			.box #picName {
				bottom: 20px;
			}
			.box #img {
				display: block;
				width: 600px;
				height: 400px;
				transition: opacity 0.5 ease-in-out;
			}
		</style>
		<script>
			window.onload = function() {
				//准备工作
				var box = document.getElementById("box")
				var arrPic = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
				var arrText = ["城市的温暖", "又见抽烟", "秋日私欲", "梨花开"];
				var picNNum = document.getElementById("picNum"); //图片的数量
				var picName = document.getElementById("picName"); //图片的名称
				var img = document.getElementById("img"); //图片路径
				var prev = document.getElementById("prev"); //上一个
				var next = document.getElementById("next"); //下一个
				var num = 0; //计数器
				function changPic() {
					picNNum.innerHTML = num + 1 + "/" + arrPic.length;
					img.src = arrPic[num];
					picName.innerHTML = arrText[num];
				}
				function auto() {
					changPic();
					num++;
					if (num == 4) {
						num = 0;
					}
					t = setTimeout(auto, 1000)
				}
				auto();
				next.onclick = function() {
					num++;
					if (num == 4) {
						num = 0;
					}
					changPic();
				}
				prev.onclick = function() {
					num--;
					if (num == -1) {
						num = arrPic.length - 1;
					}
					changPic();
				}
				box.onmouseover = function() {
					clearTimeout(t);
				}
				box.onmouseout = function() {
					t = setTimeout(auto, 1000);
				}
			}
		</script>
	</head>
	<body>
		<div class="box" id="box">
			<p id="picNum"></p>
			<p id="picName"></p>
			<img src="img/1.jpg" alt="图片1" id="img">
			<a href="javascript:" id="prev"> < </a>
			<a href="javascript:" id="next"> > </a>
		</div>
	</body>
</html>