Menu Explicit/Hidden
Register
> 博客>

自动轮播html代码css

新星源码网 2月 22日 2 0 

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动轮播</title>
<style>
* {
box-sizing: border-box;
}
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
.slideshow-container img {
width: 100%;
height: auto;
}
/* 轮播指示器样式 */
.dot {
cursor: pointer;
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;
}
/* 轮播下一张按钮样式 */
.next {
position: absolute;
top: 50%;
right: 0;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
background-color: rgba(0, 0, 0, 0.5);
}
/* 当鼠标悬停在按钮上时 */
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</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>
<!-- 下一张按钮 -->
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // 更改轮播速度，单位为毫秒
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
</script>
</body>
</html>

此代码包含一个基本的HTML结构和CSS样式，用于创建自动轮播的图像轮播器。在这个示例中，每张图片会在2秒后自动切换到下一张。你可以根据需要修改轮播速度和添加更多的图片。

HTML:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动轮播</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slideshow-container">
<div class="slideshow-item fade">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slideshow-item fade">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slideshow-item fade">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

css
.slideshow-container {
position: relative;
max-width: 800px;
margin: auto;
overflow: hidden;
}
.slideshow-item {
display: none;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

JavaScript (script.js):

javascript
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("slideshow-item");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}

这个示例中，我们使用HTML创建了一个包含轮播图片的容器，并在CSS中定义了样式。在JavaScript中，我们设置了一个函数 showSlides() 来控制轮播，让图片每隔2秒自动切换一次。

Related

热门文章

微海报