多功能轮播图(可自动,上下页,按钮跳转)

最新推荐文章于 2022-11-19 22:52:57 发布

success_on

最新推荐文章于 2022-11-19 22:52:57 发布

阅读量344

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/a2690656046/article/details/109518986

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div.lunbo {
			width: 600px;
			height: 399px;
			border:5px solid #ccc;
			margin:100px auto 20px;
			overflow: hidden;
			position: relative;
			text-align: center;
		}

		.lunbo ul {
			list-style: none;
			padding: 0px;
			position: absolute;
			bottom:0px;
			left:50%;
			transform: translateX(-50%);
		}
		.lunbo li {
			float:left;
			width: 20px;
			height: 20px;
			background-color: white;
			border-radius: 50%;
			text-align: center;
			line-height: 20px;
			margin:0px 5px;
		}

		.lunbo .cur {
			background-color:red;
			color:white;
		}

		.btn {
			text-align: center;
		}
		.btn button {
			margin:10px 40px;
			font-size: 32px;
		}
	</style>
</head>
<body>
	<div class="lunbo">
		<img src="./images/1111.png">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<div style="clear:both;"></div>
		</ul>
	</div>
	<div class="btn">
		<button class="prev">上一张</button>
		<button class="next">下一张</button>
	</div>


	<script type="text/javascript">

		// 把定时器理解为一个对象 = 成员属性+成员方法
		let time = (function(){
	        let hTime; // 定时器句柄

			function start(){
				hTime = setInterval(function(){
					showImg.src = arrPic[ keyImg.inc() ];
				},1000)
			}
			function stop(){
				clearInterval(hTime);
			}

			return {start:start, stop:stop};
		}())


		// 围绕着下标 封装一个对象
		let keyImg = (function(){
			let i = 0; // 图片数组下标. 当前显示图片的下标
			// 加1
			function inc(){
				i++;
				if (i >= arrPic.length) {
					i = 0;
				}
				return i;
			}
			// 减1
			function dec(){
				i--;
				if (i < 0) {
					i = arrPic.length-1;
				}
				return i;
			}
			return {inc:inc, dec:dec}

		}())

		
		// 图片数组
		let arrPic = [
			'./images/1111.png',
			'./images/2222.png',
			'./images/3333.png',
			'./images/4444.png'
		];

		// 每隔1秒显示下一张图片
		let showImg = document.querySelector('.lunbo img')
		
		
		time.start();

		// 上一张
		let btnPrev = document.querySelector('.prev')
		btnPrev.onclick = function(){

			// 停止定时器
			time.stop();

			// 设置减1后的图片为当前图片
			showImg.src = arrPic[ keyImg.dec() ];

			// 开启定时器
			time.start();
		}


		// 下一张
		let btnNext = document.querySelector('.next')
		btnNext.onclick = function(){

			// 停止定时器
			time.stop();

			// 当前页码+1
			// 设置当前要显示的图片
			showImg.src = arrPic[ keyImg.inc() ];

			// 开启定时器
			time.start();
		}


	</script>
</body>
</html>

效果图

在这里插入图片描述

success_on

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多功能轮播图(可自动,上下页,按钮跳转)

<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css"> div.lunbo { width: 600px; height: 399px; border:5px solid #ccc; margin:100px auto 20px; overflow: hid
复制链接

扫一扫