JavaScript_图片轮播方式

文章目录

效果图：

在这里插入图片描述

需求分析：

页面打开的时候，img中显示第一福图，order里面显示第一幅图的进度，info显示第一幅图的信息
初始时顺序点击播放
点击自动轮播按钮，变成循环播放模式，未开始播放
点击prev按钮，向左自动循环播放
点击next按钮，向右自动循环播放
点击顺序点击按钮，变成顺序播放模式
点击prev按钮，img里面变成前一张图
点击next按钮，img里面变成后一张图

源代码：

HTML部分

<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">图片加载中……</div>
		<div id="info">图片加载中……</div>
		<img id="picture">
</div>

css部分

<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>

JavaScript部分

为了简化代码，先封装一些常用的自定义构造函数

<script>
    /*无*/
</script>

js主体部分，需要用到封装的函数，调用即可

<script>
		// 0 获取相关元素
		var img = document.getElementById('picture');// 显示图片的元素
		var orderDiv = document.getElementById('order');// 显示图片进度的div
		var infoDiv = document.getElementById('info');// 显示图片信息的div
		var roundBtn = document.getElementById('round');//自动轮播按钮
		var singleBtn = document.getElementById('single');//顺序点击按钮
		var prevBtn = document.getElementById('prev');//上一张图按钮
		var nextBtn = document.getElementById('next');//下一张图按钮
		// 需要一个遍历记录当前时自动轮播还是顺序点击
		// 2 初始时顺序点击
		var flag = true; // true:顺序点击  false:自动轮播
		// 需要一个数组记录所有图片的src
		var srcArr = ['6.jpg', '7.jpg', '8.jpg', '9.jpg']
		// 需要一个数组记录图片的信息
		var infoArr = ['1', '2', '3', '4']
		// 需要一个遍历记录当前的图片的索引
		var index = 0;

		// 1 页面打开的时候
		showImg()
		var timer;
		// 3 点击自动轮播按钮变成自动轮播
		roundBtn.onclick = function () {
     
     
			flag = false;
			alert('现在是自动轮播')
		}

		// 4 点击顺序点击按钮变成顺序点击
		singleBtn.onclick = function () {
     
     
			flag = true;
			clearInterval(timer);
			alert('现在是顺序点击')
		}

		// 5 点击prev按钮，img里面变成前一张图
		prevBtn.onclick = function () {
     
     
			if (flag) {
     
     
				// 进入此处，说明flag 是true，顺序点击
				index <= 0 ? index = infoArr.length - 1 : index--;
				showImg();
			} else {
     
     
				// 进入此处，说明flag 是false，自动轮播
				clearInterval(timer);
				timer = setInterval(function () {
     
     
					index--;
					if (index < 0) {
     
     
						index = infoArr.length - 1;
					}
					showImg();
				}, 1000);
			}
		}


		// 6 点击next按钮，img里面变成后一张图
		nextBtn.onclick = function () {
     
     
			if (flag) {
     
     
				// 进入此处，说明flag 是true，顺序点击
				index >= infoArr.length - 1 ? index = 0 : index++;
				showImg();
			} else {
     
     
				// 进入此处，说明flag 是false，自动轮播
				clearInterval(timer);
				timer = setInterval(function () {
     
     
					index++;
					if (index >= infoArr.length) {
     
     
						index = 0;
					}
					showImg();
				}, 1000);
			}
		}


		// 定义一个函数，显示第index幅图
		function showImg() {
     
     
			// img中显示第一福图
			img.src = srcArr[index];
			// order里面显示第一幅图的进度
			orderDiv.innerHTML = (index + 1) + "/" + srcArr.length;
			// info显示第一幅图的信息
			infoDiv.innerHTML = infoArr[index]
		}
</script>

总代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>图片轮播的两种方式</title>
	<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">图片加载中……</div>
		<div id="info">图片加载中……</div>
		<img id="picture">
	</div>
	<script>
		// 0 获取相关元素
		var img = document.getElementById('picture');// 显示图片的元素
		var orderDiv = document.getElementById('order');// 显示图片进度的div
		var infoDiv = document.getElementById('info');// 显示图片信息的div
		var roundBtn = document.getElementById('round');//自动轮播按钮
		var singleBtn = document.getElementById('single');//顺序点击按钮
		var prevBtn = document.getElementById('prev');//上一张图按钮
		var nextBtn = document.getElementById('next');//下一张图按钮
		// 需要一个遍历记录当前时自动轮播还是顺序点击
		// 2 初始时顺序点击
		var flag = true; // true:顺序点击  false:自动轮播
		// 需要一个数组记录所有图片的src
		var srcArr = ['6.jpg', '7.jpg', '8.jpg', '9.jpg']
		// 需要一个数组记录图片的信息
		var infoArr = ['1', '2', '3', '4']
		// 需要一个遍历记录当前的图片的索引
		var index = 0;

		// 1 页面打开的时候
		showImg()
		var timer;
		// 3 点击自动轮播按钮变成自动轮播
		roundBtn.onclick = function () {
     
     
			flag = false;
			alert('现在是自动轮播')
		}

		// 4 点击顺序点击按钮变成顺序点击
		singleBtn.onclick = function () {
     
     
			flag = true;
			clearInterval(timer);
			alert('现在是顺序点击')
		}

		// 5 点击prev按钮，img里面变成前一张图
		prevBtn.onclick = function () {
     
     
			if (flag) {
     
     
				// 进入此处，说明flag 是true，顺序点击
				index <= 0 ? index = infoArr.length - 1 : index--;
				showImg();
			} else {
     
     
				// 进入此处，说明flag 是false，自动轮播
				clearInterval(timer);
				timer = setInterval(function () {
     
     
					index--;
					if (index < 0) {
     
     
						index = infoArr.length - 1;
					}
					showImg();
				}, 1000);
			}
		}


		// 6 点击next按钮，img里面变成后一张图
		nextBtn.onclick = function () {
     
     
			if (flag) {
     
     
				// 进入此处，说明flag 是true，顺序点击
				index >= infoArr.length - 1 ? index = 0 : index++;
				showImg();
			} else {
     
     
				// 进入此处，说明flag 是false，自动轮播
				clearInterval(timer);
				timer = setInterval(function () {
     
     
					index++;
					if (index >= infoArr.length) {
     
     
						index = 0;
					}
					showImg();
				}, 1000);
			}
		}


		// 定义一个函数，显示第index幅图
		function showImg() {
     
     
			// img中显示第一福图
			img.src = srcArr[index];
			// order里面显示第一幅图的进度
			orderDiv.innerHTML = (index + 1) + "/" + srcArr.length;
			// info显示第一幅图的信息
			infoDiv.innerHTML = infoArr[index]
		}
	</script>
</body>

</html>

所用图片：

在这里插入图片描述

由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦

JavaScript_图片轮播方式

文章目录

效果图：

需求分析：

源代码：

所用图片：

猜你喜欢