上一篇，我们讲到了网站所需要的导航栏
网站不仅仅需要导航栏，还有很多。例如：轮播图、登录、后台、评论区…
今天给大家介绍的的是：轮播图
所谓的轮播图，其实就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示，这就类似于舞台剧表演，支撑轮播图的内容进行展示的元素就相当于舞台，而轮播图展示的内容就是各个演员的表演，图片存储的地方就相当于舞台后边的演员准备区。
轮播图到底怎么做呢？
小编已经写好放在下面啦！
HTML代码（内包含css、JS）
<!DOCTYPE html>
<html>
<head>
<title>HTML轮播图</title>
<style>
* {
/*设置盒子边框*/
box-sizing: border-box;
}
.container {
/*相对定位；离顶部40 宽500 高400*/
position: relative;
top: 40px;
width: 500px;
height: 400px;
/*清除浮动*/
overflow: hidden;
/*让图片垂直水平居中*/
align-items: center;
margin: auto;
}
.slide {
/*绝对定位*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*透明度*/
opacity: 0;
/*过渡时长*/
transition: opacity 1s ease-in-out;
}
.slide.active {
/*透明度*/
opacity: 1;
}
</style>
</head>
<body bgcolor="#f60">
<!--轮播的图片-->
<div class="container">
<img class="slide active" src="./1.jpg">
<img class="slide" src="./2.jpg">
<img class="slide" src="./3.jpg">
</div>
<script>
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 4000);
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].className = 'slide active';
}
</script>
</body>
</html>效果图
- 以上就是小编带来关于轮播图的全部内容，有什么不对的地方或者需要改进的地方，可以在下方评论区留下您的建议，谢谢！
-
写代码需要反思和重构, 生活也是一样。
没有回复内容