✨博主:命运之光
🌸专栏: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>© 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文件(大功告成(●'◡'●))
结语
本章的内容就到这里了,觉得对你有帮助的话就支持一下博主把~
🌌点击下方个人名片,交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓