图片切换（循环切换和顺序切换）

最新推荐文章于 2021-06-10 14:52:18 发布

qq_38068491

最新推荐文章于 2021-06-10 14:52:18 发布

阅读量682

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/82906012

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#controls {
			width: 400px;
			margin: auto;
			text-align: center;
		}
		
		#container {
			width: 400px;
			height: 400px;
			border: 10px solid #eee;
			position: relative;
			background: gray;
			margin: 10px auto 0;
		}
		
		#prev,
		#next {
			position: absolute;
			background: black;
			filter: alpha(opacity: 40);
			opacity: 0.4;
			font-size: 20px;
			color: white;
			width: 40px;
			height: 40px;
			border: 2px solid white;
			line-height: 40px;
			text-align: center;
			top: 180px;
			pointer: cursor;
			text-decoration: none;
		}
		
		#prev:hover,
		#next:hover {
			filter: alpha(opacity: 80);
			opacity: 0.8;
		}
		
		#order,
		#info {
			position: absolute;
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background: black;
			filter: alpha(opacity: 60);
			opacity: 0.6;
			font-size: 20px;
			color: white;
		}
		
		#prev {
			left: 0;
		}
		
		#next {
			right: 0;
		}
		
		#picture {
			height: 400px;
			width: 400px;
		}
		
		#order {
			top: 0;
		}
		
		#info {
			bottom: 0;
		}
	</style>

	</head>

	<body>
		<div id="controls">
			<input id="round" type="button" value="循环播放">
			<input id="single" type="button" value="顺序播放">
		</div>
		<div id="container">
			<a href='javascript:' id="prev">&lt;</a>
			<a href='javascript:' id="next">&gt;</a>
			<div id="order">1/4</div>
			<div id="info">图片一</div>
			<img src="images/6.jpg" width="400" height="400" id="picture" />
		</div>
	</body>

</html>
<script type="text/javascript">
	var round = document.getElementById("round");
	var single = document.getElementById("single");
	var prev = document.getElementById("prev");
	var next = document.getElementById("next");
	var order = document.getElementById("order");
	var info = document.getElementById("info");
	var pic = document.getElementById("picture");

	var arrSrc = ["images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg"];
	var arrTitle = ['图片一', '图片二', '图片三', '图片四'];
	var num = 0;
	//点击图片切换
	function qiehuan() {
		pic.src = arrSrc[num];
		order.innerHTML = 1 + num + "/" + arrSrc.length;
		info.innerHTML = arrTitle[num];
	}
	//点击循环播放按钮
	round.onclick = function() {
		alert("循环播放开始了！");
		//点击左边
	prev.onclick = function() {
			num--;
			if (num == -1) {
				num = arrSrc.length - 1;
			}
			qiehuan();
		}
		//点击右边
	next.onclick = function() {
		num++;
		if (num == arrSrc.length) {
			num = 0;
		}
		qiehuan();
	}
	}
	//点击顺序播放按钮
	single.onclick = function() {
		alert("顺序播放开始了!");
		//点击右边
		next.onclick = function() {
			num++;
			if (num < arrSrc.length) {
               qiehuan();
			}
			if(num==arrSrc.length){
				alert("这是最后一张图了");
				num=arrSrc.length-1;
			}
			
			
		}
		//点击左边
			prev.onclick = function() {
			num--;
			if (num >-1) {
               qiehuan();
			}
			if(num==-1){
				alert("这是最后一张图了");
				num=0;
			}	
		}
	}
</script>

qq_38068491

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片切换（循环切换和顺序切换）

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&gt; #controls { width: 400px; margin
复制链接

扫一扫