js代码写轮播图
当然，下面是一个使用JavaScript编写的简单轮播图示例。这个轮播图将自动切换图片，并且可以通过点击左右箭头手动切换。
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="carousel">
<div class="carousel-inner">
<img src="image1.jpg" alt="Image 1" class="active">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<button class="prev">❮</button>
<button class="next">❯</button>
</div>
<script src="script.js"></script>
</body>
</html>CSS部分（styles.css）
.carousel {
position: relative;
width: 80%;
margin: auto;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner img {
display: none;
width: 100%;
height: auto;
}
.carousel-inner img.active {
display: block;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 16px;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}JavaScript部分（script.js）
const images = document.querySelectorAll('.carousel-inner img');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
let currentIndex = 0;
function showImage(index) {
images.forEach((img, i) => {
img.classList.toggle('active', i === index);
});
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
showImage(currentIndex);
}
// 自动切换图片
setInterval(nextImage, 3000);
// 点击按钮切换图片
nextButton.addEventListener('click', nextImage);
prevButton.addEventListener('click', prevImage);解释
- HTML部分：定义了轮播图的结构，包括图片容器和前后切换按钮。
- CSS部分：设置了轮播图的样式，包括图片的显示和隐藏，以及按钮的位置和样式。
- JavaScript部分：
showImage函数用于显示指定索引的图片，并隐藏其他图片。nextImage和prevImage函数用于切换到下一张或上一张图片。setInterval函数用于自动切换图片，每3秒切换一次。- 为前后按钮添加点击事件监听器，点击按钮时切换图片。
这个示例展示了如何使用JavaScript实现一个简单的轮播图功能。你可以根据需要进一步扩展和优化这个轮播图，例如添加过渡动画、指示器等。
相关·内容
26分19秒
136.尚硅谷_JS基础_完成轮播图
410
34分47秒
134.尚硅谷_JS基础_完成轮播图界面
360
7分1秒
4.3 轮播图管理实战
3.5K0
12分41秒
丸子小程序首页轮播图焦点图设置
2.4K0
30分5秒
81.顶部轮播图循环播放.avi
3540
24分28秒
56.顶部新闻轮播图事件处理.avi
3800
4分19秒
【看过来！小程序轮播图可以freestyle】
6.5K0
3分42秒
云官网建站 如何设置轮播图全屏显示？
1.5K0
14分3秒
16-尚硅谷-小程序-窗口配置，轮播图实现
360
16分57秒
033-尚硅谷-尚品汇-获取Banner轮播图的数据
440
27分12秒
轻松学会Laravel-项目篇(商城API) 28 轮播图管理 学习猿地
153
38分48秒
Web前端入门教程 93 JavaScript基础 65 轮播图1 学习猿地
3830
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
