css全屏轮播图代码 |html css网页制作教程

<div class="slideshow-wrapper">
<div class="slideshow">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>

以上代码中，大家使用了class为slideshow-wrapper的div元素作为整个轮播图的外层容器，class为slideshow的div元素作为轮播图的内容展示区域，同时在slideshow内部嵌套了多个class为slide的div元素，每个slide表示一个轮播项。

接下来，大家需要添加一些样式来让这个轮播图生效：

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slideshow-wrapper {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.slideshow {
position: absolute;
top: 0;
left: 0;
width: 300%; /* 每个轮播项的宽度为33.33% */
height: 100%;
display: flex;
transition: all 0.5s ease-in-out;
}
.slide {
width: 33.33%;
height: 100%;
float: left;
}
/* 为每个轮播项添加不同的背景颜色 */
.slide:nth-child(1) {
background-color: #ff6347;
}
.slide:nth-child(2) {
background-color: #00bfff;
}
.slide:nth-child(3) {
background-color: #8fbc8f;
}
/* 自动轮播动画 */
.slideshow.animate {
transform: translateX(-33.33%);
}

以上代码中，大家使用了各种CSS技术来实现这个轮播图的效果。通过将.slideshow的宽度设置为300%，每个.slide的宽度设置为33.33%，就可以让多个轮播项在一个.slideshow容器内滑动。同时，大家还使用了CSS3的transition特性来实现平滑的动画效果，让轮播图更加生动。

最后，大家还需要使用JavaScript来实现轮播图的自动播放效果：

setInterval(() =>{
const slideshow = document.querySelector('.slideshow');
slideshow.classList.add('animate');
setTimeout(() =>{
slideshow.classList.remove('animate');
}, 500); /* 动画持续时间为0.5s */
}, 3000); /* 自动播放间隔时间为3s */

以上JavaScript代码中，大家使用setInterval函数来实现每隔3秒自动播放下一张轮播图的效果，并利用classList.add和classList.remove函数来添加和移除.animate类来触发轮播动画效果。