轮播图用js，css，html

Junju_

已于 2023-04-10 15:14:27 修改

阅读量117

点赞数

分类专栏： javascript项目文章标签： css html javascript

于 2023-04-10 15:12:32 首次发布

本文链接：https://blog.csdn.net/m0_58451019/article/details/130060755

版权

javascript项目专栏收录该内容

10 篇文章 1 订阅

订阅专栏

该代码示例展示了如何使用HTML、CSS和JavaScript创建一个基本的轮播图组件。CSS用于设置轮播图容器和图片的样式，实现图片的平滑过渡效果；JavaScript则用于处理图片的自动切换以及点击圆点切换图片的功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<title>轮播图</title>
	<style>
		/* 设置轮播图容器的宽度和高度 */
		.container {
			width: 1000px;
			height: 400px;
			overflow: hidden;
			position: relative;
			margin: 0 auto;
		}

		/* 设置轮播图中每张图片的样式 */
		.container img {
			width: 1000px;
			height: 400px;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			transition: opacity 1s ease-in-out;
		}

		/* 设置轮播图中第一张图片的样式 */
		.container img:first-child {
			opacity: 1;
		}

		/* 设置轮播图中的圆点容器的样式 */
		.dots {
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
		}

		/* 设置轮播图中每个圆点的样式 */
		.dot {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: #fff;
			margin-right: 10px;
			cursor: pointer;
		}

		/* 设置轮播图中当前圆点的样式 */
		.dot.active {
			background-color: #000;
		}
	</style>
</head>
<body>
	<div class="container">
		<img src="image1.jpg">
		<img src="image2.jpg">
		<img src="image3.jpg">
		<div class="dots">
			<div class="dot active"></div>
			<div class="dot"></div>
			<div class="dot"></div>
		</div>
	</div>
	<script>
		// 获取轮播图容器和圆点容器
		var container = document.querySelector('.container');
		var dots = document.querySelector('.dots');

		// 获取轮播图中的所有图片和圆点
		var images = container.querySelectorAll('img');
		var dotsArray = Array.from(dots.children);

		// 设置当前显示的图片和圆点的索引
		var currentIndex = 0;

		// 定义轮播函数
		function carousel() {
			// 隐藏当前显示的图片和圆点
			images[currentIndex].style.opacity = 0;
			dotsArray[currentIndex].classList.remove('active');

			// 计算下一张图片和圆点的索引
			currentIndex = (currentIndex + 1) % images.length;

			// 显示下一张图片和圆点
			images[currentIndex].style.opacity = 1;
			dotsArray[currentIndex].classList.add('active');
		}

		// 设置定时器，每隔3秒钟调用一次轮播函数
		setInterval(carousel, 3000);

		// 为每个圆点添加点击事件，点击后显示对应的图片
		dotsArray.forEach(function(dot, index) {
			dot.addEventListener('click', function() {
				// 隐藏当前显示的图片和圆点
				images[currentIndex].style.opacity = 0;
				dotsArray[currentIndex].classList.remove('active');

				// 显示点击的圆点对应的图片和圆点
				currentIndex = index;
				images[currentIndex].style.opacity = 1;
				dotsArray[currentIndex].classList.add('active');
			});
		});
	</script>
</body>
</html>

Junju_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图用js，css，html

* 设置轮播图中第一张图片的样式 *//* 设置轮播图中的圆点容器的样式 *//* 设置轮播图容器的宽度和高度 *//* 设置轮播图中每张图片的样式 *//* 设置轮播图中每个圆点的样式 *//* 设置轮播图中当前圆点的样式 */// 设置当前显示的图片和圆点的索引。// 显示点击的圆点对应的图片和圆点。// 获取轮播图中的所有图片和圆点。// 计算下一张图片和圆点的索引。// 获取轮播图容器和圆点容器。// 隐藏当前显示的图片和圆点。// 隐藏当前显示的图片和圆点。// 显示下一张图片和圆点。
复制链接

扫一扫

专栏目录