简单html轮播完整代码
html<!DOCTYPE html>
<html>
<head>
<title>简单轮播示例</title>
<style>
/* 设置轮播容器的样式 */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
}
/* 设置轮播图片的样式 */
.mySlides {
display: none;
}
/* 设置轮播导航点的样式 */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* 鼠标悬停在导航点时改变背景颜色 */
.active {
background-color: #717171;
}
</style>
</head>
<body>
<div class="slideshow-container">
<!-- 轮播图片 -->
<div class="mySlides">
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="image2.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="image3.jpg" style="width:100%">
</div>
<!-- 导航点 -->
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script>
// JavaScript 代码实现轮播功能
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 2000); // 每 2 秒切换一张图片
}
</script>
</body>
</html>
在这个示例中，我们创建了一个轮播容器，其中包含了三张图片和对应的导航点。通过JavaScript代码，我们实现了轮播功能，每隔2秒自动切换图片，并根据当前显示的图片高亮显示对应的导航点。你可以将图片文件的路径替换为你自己的图片，并根据需要调整样式和切换时间。
html<!DOCTYPE html>
<html>
<head>
<title>简单轮播示例</title>
<style>
/* 设置轮播容器的样式 */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
}
/* 设置轮播图片的样式 */
.mySlides {
display: none; /* 隐藏所有轮播图片 */
}
/* 设置轮播导航点的样式 */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* 鼠标悬停在导航点时改变背景颜色 */
.active {
background-color: #717171;
}
</style>
</head>
<body>
<div class="slideshow-container">
<!-- 轮播图片 -->
<div class="mySlides">
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="image2.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="image3.jpg" style="width:100%">
</div>
<!-- 导航点 -->
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script>
// JavaScript 代码实现轮播功能
var slideIndex = 0;
// 自动切换图片的函数
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
// 隐藏所有轮播图片
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
// 如果达到最后一张图片，则从第一张重新开始
if (slideIndex > slides.length) {
slideIndex = 1;
}
// 隐藏所有导航点的激活状态
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
// 显示当前轮播图片，并将对应导航点标记为激活状态
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
// 每隔2秒切换一张图片
setTimeout(showSlides, 2000);
}
// 页面加载完成后开始轮播
window.onload = showSlides;
</script>
</body>
</html>
在这个代码示例中，我们添加了window.onload事件处理程序，以确保在页面加载完成后开始轮播。轮播图会自动播放，同时用户也可以点击导航点手动切换图片。根据需要，您可以进一步自定义样式、图片和切换间隔等设置。
