纯JS实现左右滑动轮播图

最新推荐文章于 2025-03-04 17:46:48 发布

白纸一样

最新推荐文章于 2025-03-04 17:46:48 发布

阅读量9.3k

点赞数 16

分类专栏： JavaScript 文章标签： js 轮播图 javascript 轮播滑动

本文链接：https://blog.csdn.net/qq_45670042/article/details/107345722

版权

本文详细介绍了如何使用纯JavaScript实现一个具有无缝切换、跳转指示、鼠标悬停暂停等功能的轮播图。文章包括轮播图的功能需求、HTML布局与CSS样式、实现原理，以及完整的代码展示。在实现原理部分，讲解了如何通过调整图片容器的外边距和利用setTimeout()实现自动切换，以及如何通过监听事件处理跳转和鼠标悬停效果。

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

效果图

（完整代码在最下面）
美末2属实⑧行

轮播图的功能要求

每次只显示一张图片
轮播图需要实现左右无缝切换
需要实现跳转（放在圆点显示对应图片）
当前图片的小圆点样式需要突出
当鼠标放在图片上时，轮播停止
在切换图片时鼠标放在图片上，取消轮播效果，切换到对应图片。

HTML布局与css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}

			body {
				background: #646863;
			}

			img {
				width: 1280px;
				height: 722px;
			}

			#banner {
				width: 1280px;
				height: 722px;
				overflow: hidden;
				position: relative;
			}

			#img_list {
				width: 7680px;
				height: 722px;
			}

			#img_list li {
				float: left;
			}

			#icon_list {
				position: absolute;
				right: 20px;
				bottom: 20px;
				list-style: none;
			}

			#icon_list li {
				color: #E69800;
				float: left;
				height: 50px;
				width: 50px;
				border: 5px solid cadetblue;
				border-radius: 50%;
				line-height: 50px;
				text-align: center;
				margin-right: 15px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<ul id="img_list">
				<li><img src="img3/preview1.jpg"></li>
				<li><img src="img3/preview2.jpg"></li>
				<li><img src="img3/preview3.jpg"></li>
				<li><img src="img3/preview4.jpg"></li>
				<li><img src="img3/preview1.jpg"></li>
			</ul>
			<ul id="icon_list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>

			</ul>
		</div>
		</body>
</html>

实现原理

每次只显示一张图片

多余图片的隐藏

利用小盒子套大盒子，实现对图片的隐藏。

轮播图需要实现左右无缝切换

轮播图的动态切换
利用右外边距或左外边距的加减来操作整个放有图片div的移动，同时利用setTimeout()函数和计时器实现自动切换，从而达到图片无缝切换的效果

//得到图片的集合
var imgs = document.getElementById('img_list').getElementsByTagName('li');
//得到小圆点的集合
var icons = document.getElementById('icon_list').getElementsByTagName('li');
//初始左外边距默认为0px
var Left = 0;
//定义计时器
var timer;
			run();
			function run() {
   
				//图片切换到最后时，重新归零。
				if (Left <= -5120) {
   
					img_list.style.marginLeft = "0px";
					Left = 0;
				}
				//用n表示图片切换和停留的时间，如果刚好显示，停2000，否则以10的速度切换（Left持续-10，直到再次刚好显示图片）
				var n = (Left % 1280 == 0 ? 2000 : 10);
				changeimg();
				m = Math.floor(-Left / 1280);//切换小圆点样式的方法，此处暂且不提
				changeicon(m);//切换小圆点样式的方法，此处暂且不提
				Left -= 10;
				//重复执行run方法。实现一直轮播。
				timer = setTimeout(run, n);
			}

			function changeimg() {
   
				//切换图片的方法、
				img_list.style.marginLeft = Left + "px";
			}

需要实现跳转（放在圆点显示对应图片）

为小圆点添加监听事件，当鼠标放在圆点上时，调用clearTimeout()方法停止轮播，调整计时器参数到固定值，使左右边距加减的滑动效果转为直接跳转到对应图片的效果，并在鼠标移出时重新启动轮播setTimeout()

// 变量作用域两种：全局变量、局部变量。js中函数内部可以读取全局变量，函数外部不能读取函数内部的局部变量。
			
			// js链式作用域：子对象会一级一级向上寻找所有父对象的变量，反之不行。
			// f2可以读取f1中的变量，只要把f2作为返回值，就可以在f1外读取f1内部变量
			for (var i = 0; i < imgs

最低0.47元/天解锁文章