❤️创意网页：打造简洁美观的网页轮播图（HTML简单实现轮播图）操作简单可以直接使用

✨博主：命运之光

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

引言

动态图展示

静态图展示

展示一

展示二

展示三

编辑

页面介绍

网页源代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

引言

在现代网页设计中，轮播图是一种常见而引人注目的元素，用于展示图片和信息。一个简洁美观的轮播图可以提升网页的视觉吸引力和用户体验。在本篇博客中，我们将介绍如何使用 HTML、CSS 和 JavaScript 创建一个令人印象深刻的轮播图。

让我们来看看如何使用 HTML、CSS 和 JavaScript 来实现一个令人印象深刻的轮播图。

动态图展示

静态图展示

展示一

展示二

展示三

页面介绍

我们的页面由以下几个部分组成：

头部（Header）：在头部我们展示了一个简洁的标题，用来说明这个页面的主题。
主体（Main）：主体部分包含一个轮播图容器，其中包含了几个幻灯片（Slide）。每个幻灯片都显示一张图片，你可以根据需要自定义图片的数量。
脚注（Footer）：在脚注中显示了版权信息，这里是以 "版权年份-月份 @制作者" 的形式展示。

在代码中，我们使用了一些CSS样式和JavaScript来实现轮播图的效果。CSS样式用于定义页面的布局和外观，而JavaScript则用于控制幻灯片的切换和轮播。

网页源代码

 <!DOCTYPE html>
<html>
<head>
  <title>简洁美观的轮播图</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <h1>简洁美观的轮播图</h1>
  </header>
 
  <main>
    <div class="slideshow-container">
      <div class="slide">
        <img src="image1.jpg" alt="Image 1">
      </div>
      <div class="slide">
        <img src="image2.jpg" alt="Image 2">
      </div>
      <div class="slide">
        <img src="image3.jpg" alt="Image 3">
      </div>
    </div>
  </main>
 
  <footer>
    <p>&copy; 2023-7-16 @命运之光制作 </p>
  </footer>
 
  <script src="script.js"></script>
</body>
</html>
 
 
<style>
/* 重置默认样式 */
body, h1, p, ul, li {
  margin: 0;
  padding: 0;
}
 
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
}
 
header {
  background-color: #333;
  padding: 20px;
  text-align: center;
}
 
h1 {
  font-size: 24px;
  color: #fff;
}
 
main {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
.slideshow-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
 
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
 
.slide.active {
  opacity: 1;
}
 
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}
 
</style>
 
<script>
document.addEventListener("DOMContentLoaded", function(event) {
  const slides = document.querySelectorAll('.slide');
  let currentSlide = 0;
 
  function showSlide(index) {
    slides.forEach((slide, i) => {
      if (i === index) {
        slide.classList.add('active');
      } else {
        slide.classList.remove('active');
      }
    });
  }
 
  function nextSlide() {
    currentSlide++;
    if (currentSlide >= slides.length) {
      currentSlide = 0;
    }
    showSlide(currentSlide);
  }
 
  setInterval(nextSlide, 2000); // 每 2 秒切换一张幻灯片
 
  showSlide(currentSlide); // 显示第一张幻灯片
});
 
</script>复制

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片，交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

	<!DOCTYPE html>
	<html>
	<head>
	<title>简洁美观的轮播图</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<header>
	<h1>简洁美观的轮播图</h1>
	</header>

	<main>
	<div class="slideshow-container">
	<div class="slide">
	<img src="image1.jpg" alt="Image 1">
	</div>
	<div class="slide">
	<img src="image2.jpg" alt="Image 2">
	</div>
	<div class="slide">
	<img src="image3.jpg" alt="Image 3">
	</div>
	</div>
	</main>

	<footer>
	<p>© 2023-7-16 @命运之光制作 </p>
	</footer>

	<script src="script.js"></script>
	</body>
	</html>


	<style>
	/* 重置默认样式 */
	body, h1, p, ul, li {
	margin: 0;
	padding: 0;
	}

	body {
	font-family: Arial, sans-serif;
	background-color: #f0f0f0;
	color: #333;
	}

	header {
	background-color: #333;
	padding: 20px;
	text-align: center;
	}

	h1 {
	font-size: 24px;
	color: #fff;
	}

	main {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.slideshow-container {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	}

	.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease;
	}

	.slide.active {
	opacity: 1;
	}

	.slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	footer {
	background-color: #333;
	color: #fff;
	padding: 20px;
	text-align: center;
	}

	</style>

	<script>
	document.addEventListener("DOMContentLoaded", function(event) {
	const slides = document.querySelectorAll('.slide');
	let currentSlide = 0;

	function showSlide(index) {
	slides.forEach((slide, i) => {
	if (i === index) {
	slide.classList.add('active');
	} else {
	slide.classList.remove('active');
	}
	});
	}

	function nextSlide() {
	currentSlide++;
	if (currentSlide >= slides.length) {
	currentSlide = 0;
	}
	showSlide(currentSlide);
	}

	setInterval(nextSlide, 2000); // 每 2 秒切换一张幻灯片

	showSlide(currentSlide); // 显示第一张幻灯片
	});

	</script>

❤️创意网页：打造简洁美观的网页轮播图（HTML简单实现轮播图）操作简单可以直接使用

引言

动态图展示

静态图展示

展示一

展示二

展示三

页面介绍

网页源代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

微信扫一扫：分享