JS特效篇：简单轮播图

已于 2025-05-12 07:32:36 修改
阅读量835 收藏 12
点赞数 20
分类专栏： # JS页面特效 文章标签： javascript 前端 html 轮播图 css
于 2025-05-12 06:30:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuhen_n/article/details/147867533
版权

JS特效篇：简单轮播图

前言

在前端开发中，轮播图是一种非常常见且实用的交互组件，它能够在有限的空间内展示多个内容，广泛应用于网站首页、产品展示页等场景。
本文将讲述如何通过CSS+JS，实现一个简单轮播图，并详细讲解其中的原理和关键代码。

效果预览

我们最终实现的轮播图效果如下：一个宽 750px、高 400px 的轮播容器，内部有多张图片自动循环播放，当鼠标悬停在轮播图上时，自动播放暂停；点击轮播图区域，会切换到下一张图片，点击后一段时间自动播放继续，其效果图如下所示：
简单轮播图

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>简单轮播图</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				font-family: Arial, sans-serif;
				background-color: #f5f5f5;
				min-height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20px;
			}

			.carousel-container {
				width: 750px;
				height: 400px;
				position: relative;
				overflow: hidden;
				border-radius: 10px;
				box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
				background-color: rgba(0, 0, 0, 0.1);
			}

			.carousel-slides {
				display: flex;
				height: 100%;
				transition: transform 0.5s ease-in-out;
			}

			.carousel-slide {
				min-width: 100%;
				height: 100%;
				position: relative;
			}

			.carousel-slide img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		</style>
	</head>
	<body>
		<div class="carousel-container">
			<div class="carousel-slides" id="carousel-slides">
				<div class="carousel-slide">
					<img src="https://picsum.photos/id/29/750/400" alt="雪山耸立">
				</div>

				<div class="carousel-slide">
					<img src="https://picsum.photos/id/10/750/400" alt="林中小湖">
				</div>

				<div class="carousel-slide">
					<img src="https://picsum.photos/id/28/750/400" alt="山中峡谷">
				</div>
			</div>
		</div>

		<script>
			document.addEventListener('DOMContentLoaded', function() {
				const slidesContainer = document.getElementById('carousel-slides');
				const slides = document.querySelectorAll('.carousel-slide');

				let currentIndex = 0; // 用于记录当前显示的图片索引
				const slideCount = slides.length; // 获取图片总数
				let autoplayInterval; // 存储自动播放的定时器 ID
				let isPlaying = true; // 标记当前轮播图是否处于自动播放状态
				const autoplayDuration = 3000; // 3秒切换一次

				// 更新轮播位置
				function updateCarousel() {
					slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
				}

				// 下一张
				function nextSlide() {
					currentIndex = (currentIndex + 1) % slideCount;
					updateCarousel();
				}


				// 开始自动播放
				function startAutoplay() {
					autoplayInterval = setInterval(nextSlide, autoplayDuration);
					isPlaying = true;
				}

				// 停止自动播放
				function stopAutoplay() {
					clearInterval(autoplayInterval);
					isPlaying = false;
				}

				// 点击轮播图切换到下一张
				slidesContainer.addEventListener('click', (e) => {
					stopAutoplay();
					nextSlide();
					setTimeout(startAutoplay, autoplayDuration);
				});

				// 鼠标悬停暂停自动播放
				const carouselContainer = document.querySelector('.carousel-container');
				carouselContainer.addEventListener('mouseenter', stopAutoplay);
				carouselContainer.addEventListener('mouseleave', startAutoplay);

				// 初始化
				updateCarousel();
				startAutoplay();
			});
		</script>
	</body>
</html>

代码说明

HTML结构

<div class="carousel-container">
	<div class="carousel-slides" id="carousel-slides">
		<div class="carousel-slide">
			<img src="https://picsum.photos/id/29/750/400" alt="雪山耸立">
		</div>

		<div class="carousel-slide">
			<img src="https://picsum.photos/id/10/750/400" alt="林中小湖">
		</div>

		<div class="carousel-slide">
			<img src="https://picsum.photos/id/28/750/400" alt="山中峡谷">
		</div>
	</div>
</div>

HTML结构说明

在上述代码中：

  1. 最外层的.carousel-container是轮播图的容器，用于设置整体的样式和布局。
  2. .carousel-slides是图片滑动的容器，通过控制它的transform属性来实现图片的切换。
  3. 每一个.carousel-slide代表一张轮播图片，这里使用了占位图片链接https://picsum.photos，你可以替换成自己的图片链接。

CSS样式

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		font-family: Arial, sans-serif;
		background-color: #f5f5f5;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}

	.carousel-container {
		width: 750px;
		height: 400px;
		position: relative;
		overflow: hidden;
		border-radius: 10px;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
		background-color: rgba(0, 0, 0, 0.1);
	}

	.carousel-slides {
		display: flex;
		height: 100%;
		transition: transform 0.5s ease-in-out;
	}

	.carousel-slide {
		min-width: 100%;
		height: 100%;
		position: relative;
	}

	.carousel-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
</style>

CSS样式说明

在上述代码中：

  1. 轮播容器样式：.carousel-container定义了轮播图的大小，overflow: hidden隐藏超出容器部分的内容，实现图片切换时的滑动效果。
  2. 图片滑动容器样式：.carousel-slides通过transition属性设置切换动画的过渡效果，使图片切换更加平滑。
  3. 单张图片样式：.carousel-slide设置了图片的尺寸和定位，.carousel-slide img使用object-fit: cover确保图片在容器内按比例缩放并覆盖整个容器，避免出现拉伸或空白区域。

JS逻辑

<script>
	document.addEventListener('DOMContentLoaded', function() {
		const slidesContainer = document.getElementById('carousel-slides');
		const slides = document.querySelectorAll('.carousel-slide');

		let currentIndex = 0; // 用于记录当前显示的图片索引
		const slideCount = slides.length; // 获取图片总数
		let autoplayInterval; // 存储自动播放的定时器 ID
		let isPlaying = true; // 标记当前轮播图是否处于自动播放状态
		const autoplayDuration = 3000; // 3秒切换一次

		// 更新轮播位置
		function updateCarousel() {
			slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
		}

		// 下一张
		function nextSlide() {
			currentIndex = (currentIndex + 1) % slideCount;
			updateCarousel();
		}


		// 开始自动播放
		function startAutoplay() {
			autoplayInterval = setInterval(nextSlide, autoplayDuration);
			isPlaying = true;
		}

		// 停止自动播放
		function stopAutoplay() {
			clearInterval(autoplayInterval);
			isPlaying = false;
		}

		// 点击轮播图切换到下一张
		slidesContainer.addEventListener('click', (e) => {
			stopAutoplay();
			nextSlide();
			setTimeout(startAutoplay, autoplayDuration);
		});

		// 鼠标悬停暂停自动播放
		const carouselContainer = document.querySelector('.carousel-container');
		carouselContainer.addEventListener('mouseenter', stopAutoplay);
		carouselContainer.addEventListener('mouseleave', startAutoplay);

		// 初始化
		updateCarousel();
		startAutoplay();
	});
</script>

JS逻辑说明

在上述代码中：

  1. updateCarousel：通过修改slidesContainer的transform属性，改变图片滑动容器的位置，实现图片切换。
  2. nextSlide：计算下一张图片的索引，使用取余%运算确保有效索引，并调用updateCarousel更新轮播图。
  3. startAutoplay：使用setInterval方法开启图片循环切换。
  4. stopAutoplay：清除定时器，停止播放。
    5.鼠标事件监听：添加鼠标进入和离开事件监听器，实现鼠标悬停暂停自动播放，鼠标离开继续自动播放的功能。

结语

本文主要介绍了如何通过CSS+JS实现一个简单轮播图，在后面的文章中，我会继续探讨其他类型的轮播图，你还知道哪些轮播图？欢迎在评论区留言分享！

用简单的 JavaScript 代码实现图片轮播效果
CsCufft的博客
10-06 299
轮播图是网页中常见的展示多张图片的方式，通过自动或手动切换图片来提供更好的用户体验。在本文中，我将向您展示如何使用简单的 JavaScript 代码实现一个基本的图片轮播效果。这里只提供了一个基本的实现思路，您可以根据自己的需求进行适当的修改和扩展。通过以上的 JavaScript 代码，我们实现了一个简单的图片轮播效果。首先，我们需要一个包含多个图片的容器，并为每个图片创建一个对应的小圆点作为导航指示器。，并通过控制该类名的出现和消失来切换幻灯片的显示。变量来保存当前显示的幻灯片的索引。
利用JS实现图片轮播（示例）
2302_81659011的博客
11-08 3210
实现了一个较为完整的图片切换和控制功能。自动轮播和手动切换功能相互独立又可以协同工作，而。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
js轮播图 最简单代码
m0_54589634的博客
10-24 2万+
js轮播图 最简单代码 今天来分享一篇js最简单轮播图轮播图，用最简单的代码实现： 首先，建立一个HTML文件，插入img标签，这里我们定义图片id为pic 然后使用document.getElementByid()获取img标签的id，并且定一个一个变量obj储存对象 把轮播的图片设置数字.JPG(方便插入) 定义一个全局变量num，这里我们初始图片为0.JPG。num初始值可以设置为0 创建轮播函数，使用obj变量设置img标签插入的图片，随着num数值的变化切换图片，当切换到最后一张图片时，num重
炫酷的HTML5粒子动画特效实现详解
最新发布
qq_43129878的博客
03-22 1338
本文将详细介绍如何使用HTML5 Canvas技术实现一个炫酷的粒子动画特效系统。该系统包含三种不同的动画效果：星空、烟花和雨滴，并支持鼠标交互功能，能够为网页增添绚丽的视觉效果。通过HTML5 Canvas和原生JavaScript，我们实现了一个具有多种效果的粒子动画系统。Canvas绘图基础面向对象的粒子系统设计动画效果的实现原理性能优化方案交互体验的提升这个项目不仅实现了炫酷的视觉效果，还提供了良好的代码可维护性和扩展性。
总结了一些 html（H5） 各种 炫酷代码
afufufufu的博客
11-01 1万+
H5炫酷代码
前端小案例——轮播图（HTML+CSS+JS, 附源码）
前端小白一枚
01-27 1万+
这个轮播图是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和图片
轮播图制作，详细步骤及 HTML+CSS+JS 完整代码
qq_46178261的博客
04-05 6万+
1.轮播图的结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
js 轮播 特效 代码 轮播图带文字特效
09-22
使用JavaScript（简称js）编写轮播特效，可以使得网页上的轮播图更加生动有趣，提供用户友好的交互体验。js轮播特效代码实现的关键在于掌握定时器、DOM操作以及动画效果的控制。常见的js轮播图一般包括自动轮播、...
JS网页特效京东首页轮播图
11-16
综上所述，制作一个像京东首页那样的JS网页特效轮播图涉及到前端技术的多个方面，包括HTML结构布局、CSS样式设计和JavaScript交互逻辑。通过合理的代码组织和优化，我们可以创建出既美观又高效的轮播图效果。
js带缩略图的轮播图片特效
06-04
1. JavaScript基础：轮播图的实现离不开JavaScript，它能监听用户的操作（如点击按钮或滑动），并根据这些操作更新图片。基本的步骤包括初始化图片数组、设置定时器自动轮播、编写切换函数等。 2. DOM操作：...
js带缩略图的轮播图片特效2
06-04
6. **js**：这个文件夹很可能包含了实现轮播图功能的JavaScript代码，包括图片切换逻辑、事件监听、计时器控制等。 7. **data**：这个文件名可能表示数据文件，例如JSON格式的文件，用于存储轮播图片的信息，如图片...
JS网页特效：大图轮播效果实现技巧
开发者使用JavaScript来控制轮播图的切换时机、动画过渡、响应用户交互（如点击、滑动等）以及轮播状态的管理（如当前激活的图片、自动播放等）。另外，JavaScript还可以用来检测浏览器兼容性、处理异常情况，确保...
10个炫酷特效的网页写法（附源码），拿去就能用，nice
热门推荐
王春燕的博客
04-26 9万+
这是借鉴其他博主的，觉得挺实用的，给网页加个背景，给鼠标加个特效，这些“使用简单”，“效果爆炸”的页面，分享给大家，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了。 目录 1、鼠标点击弹出爱心 2、鼠标点击弹出文字 3、鼠标点击弹出烟花波纹 4、鼠标小星星拖尾跟随 5、鼠标粒子随心拖尾跟随 6、鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果（自由组合） 7、樱花特效 8、蜘蛛网特效 9、看板娘（左下角的小人） 10、烟花 1、鼠标点击弹出爱心 代码 &l
原生js实现轮播图
qq_42032095的博客
06-02 597
原生js实现轮播图，该方法参考b站一个大佬的视频做的，我把具体注释都标注在代码里面了。
对一些常见的HTML5特效进行整理和运行（有趣特效，烟花特效，爱心特效，炫酷特效）
sgsgsgwe的博客
07-29 3126
对一些常见的HTML5特效进行整理包括烟花特效，爱心特效，炫酷特效，流星雨特效还有一些又去特效
三种js轮播实现方式详解（看一遍就会）
adminsir0的博客
08-29 1万+
js，轮播，轮播图，滚动，定位，滚动条，src，替换，定时器，
js实现的简易轮播图，适合初学者
qq_45634787的博客
02-02 1842
js实现的简易轮播图，适合初学者。
HTML炫酷的背景代码，可用，亲测有效
chenzhi0122的博客
06-11 1533
如果效果好的话下次给大家发一个我用在CZbuy的更漂亮的！html炫酷的背景代码，会跟随鼠标移动变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值