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

<!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>
图片切换 （循环切换和顺序切换）

猜你喜欢

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