滚动轮播图

最新推荐文章于 2022-05-23 08:58:01 发布

原创最新推荐文章于 2022-05-23 08:58:01 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #滚动轮播图

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍两种实现滚动轮播图的方法：面向过程与面向对象。通过HTML、CSS布局及JavaScript交互，实现图片滚动效果，响应鼠标滚轮事件，切换图片显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 面向过程的滚动轮播图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 560px;
			height: 300px;
			margin: 0 auto;
			position: relative;
			 overflow: hidden; 
		}
		#carousel {
			position: absolute;
			left: 0;
			top: 0;
			width: 5000px;
			height: 100%;
		}
		li {
			float: left;
			list-style: none;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul id="carousel">
			<li><img src="images/0.jpg" alt=""></li>
			<li><img src="images/1.jpg" alt=""></li>
			<li><img src="images/2.jpg" alt=""></li>
			<li><img src="images/3.jpg" alt=""></li>
			<li><img src="images/4.jpg" alt=""></li>
			<li><img src="images/0.jpg" alt=""></li>
		</ul>
	</div>
	<script type="text/javascript" src="js/bindEvent.js"></script>
	<script type="text/javascript" src="js/animate.js"></script>
	<script type="text/javascript">
		// 获取元素
		var box = document.getElementById("box");
		// 定义盒子宽度
		var width = box.clientWidth;
		var carousel = document.getElementById("carousel");
		var lis = document.getElementsByTagName("li");
		var length = lis.length;
		// 定义信号量
		var idx = 0;
		// 节流
		var lock = true;
		// 绑定事件
		bindEvent(document, "mousewheel", function(e) {
			// 图片是否在运动
			if (!lock) {return}
			// 过河拆桥
			lock = false;
			// 判断方向
			if (direction(e)) {
				// 兼容ie
				var e = e || window.event;
				// 说明是往下滚动， 让carousel往左边移动。
				// 信号量++
				idx++;
				animate(carousel, {left: - idx * width}, 1000, function() {
					// 进行判断
					if (idx >= length - 1) {
						// 拉回原位
						idx = 0;
						carousel.style.left = 0 + "px";
					}
					// 开锁
					lock = true;
				})
			} else {
				// 信号量--
				idx--;
				// 判断
				if (idx < 0) {
					// 拉回原位
					idx = length - 1;
					// 元素
					carousel.style.left = - idx * width + "px";
					idx--;
				}
				animate(carousel, {left: - idx * width}, 1000, function() {
					// 开锁
					lock = true;
				})
			}
		})

		// 封装一个函数， 函数执行的时候，返回滚轮的方向
		function direction(e) {
			// 查看 滚轮方向
			// console.log(e.wheelDelta);
			// 利用e.wheelDelta 是否是undefined 来判定浏览器
			if (typeof e.wheelDelta === "undefined") {
				// 说明是火狐
				// console.log("火狐")
				// 判定滚轮方向
				if (e.detail > 0) {
					// console.log("往下滚动")
					return true;
				} else {
					// console.log("往上滚动")
					return false;
				}
			} else {
				// console.log("不是火狐");
				// 判定滚轮方向
				if (e.wheelDelta > 0) {
					// console.log("往上滚动")
					return false;
				} else {
					// console.log("往下滚动")
					return true;
				}
			}
		}
	</script>
</body>
</html>

2. 面向对象的滚动轮播图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 560px;
			height: 300px;
			margin: 0 auto;
			position: relative;
			 overflow: hidden; 
		}
		#carousel {
			position: absolute;
			left: 0;
			top: 0;
			width: 5000px;
			height: 100%;
		}
		li {
			float: left;
			list-style: none;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul id="carousel">
			<li><img src="images/0.jpg" alt=""></li>
			<li><img src="images/1.jpg" alt=""></li>
			<li><img src="images/2.jpg" alt=""></li>
			<li><img src="images/3.jpg" alt=""></li>
			<li><img src="images/4.jpg" alt=""></li>
			<li><img src="images/0.jpg" alt=""></li>
		</ul>
	</div>
	<script type="text/javascript" src="js/bindEvent.js"></script>
	<script type="text/javascript" src="js/animate.js"></script>
	<script type="text/javascript">
		// // 封装一个函数， 函数执行的时候，返回滚轮的方向
		function direction(e) {
			// 查看 滚轮方向
			// console.log(e.wheelDelta);
			// 利用e.wheelDelta 是否是undefined 来判定浏览器
			if (typeof e.wheelDelta === "undefined") {
				// 说明是火狐
				// console.log("火狐")
				// 判定滚轮方向
				if (e.detail > 0) {
					// console.log("往下滚动")
					return true;
				} else {
					// console.log("往上滚动")
					return false;
				}
			} else {
				// console.log("不是火狐");
				// 判定滚轮方向
				if (e.wheelDelta > 0) {
					// console.log("往上滚动")
					return false;
				} else {
					// console.log("往下滚动")
					return true;
				}
			}
		}
	</script>
	<script type="text/javascript">
		// 以下书写方式为面向对象
		// 我们把轮播图看成是一个对象， 
		// 既然是对象， 那么就可以拥有属性，和方法（要做的事情）
		// 定义carsousel对象
		var carousel = {
			// 容器属性
			dom: document.getElementById("box"),
			// carousel属性
			carousel: document.getElementById("carousel"),
			// 图片列表属性
			lis: document.getElementsByTagName("li"),
			// 定义锁属性
			lock: true,
			// 信号量
			idx: 0,
			// 定义方法
			left: function() {
				// 缓存this
				var me = this;
				// 定义锁
				if (!this.lock) {
					return;
				}
				// 过河拆桥
				this.lock = false;
				// 图片往左移动，idx++
				this.idx++;
				animate(this.carousel, {left: - this.idx * this.dom.clientWidth}, 1000, function() {
					// 进行判定
					if (me.idx >= me.lis.length - 1) {
						// 拉回原位
						me.idx = 0;
						me.carousel.style.left = 0 + "px";
					}
					// 开锁
					me.lock = true;
				})
			},
			right: function () {
				var me = this;
				if (!this.lock) {
					return;
				}
				// 过河拆桥
				this.lock = false;
				this.idx--;
				if (this.idx < 0) {
					this.idx = this.lis.length - 1;
					this.carousel.style.left = -this.idx * this.dom.clientWidth + "px";
					this.idx--;
				}
				animate(this.carousel,{left:-this.idx * this.dom.clientWidth}, 1000,function () {
					me.lock = true;
				})
			}
		}

		// 添加滚轮事件
		document.onmousewheel = function(e) {
			if (direction(e)) {
				// 调用carousel对象的方法
				carousel.left();
			}else {
				carousel.right();
			}
		}
	</script>
</body>
</html>