css制作滑动幻灯片效果代码（css滑动动画）

CSS制作滑动幻灯片效果是网页制作中常见的一种效果，它可以给用户带来优美的视觉体验，让网页更加生动有趣。下面我们将介绍一种使用CSS制作滑动幻灯片效果的代码。

!--HTML部分-->
    div class="slider">
    div class="slide-1">
    img src="images/slide-1.jpg">
    /div>
    div class="slide-2">
    img src="images/slide-2.jpg">
    /div>
    div class="slide-3">
    img src="images/slide-3.jpg">
    /div>
    div class="slide-4">
    img src="images/slide-4.jpg">
    /div>
    /div>
    !--CSS部分-->
.slider{
    width:100%;
    overflow:hidden;
    position:relative;
}
.slider div{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    opacity:0;
    transition: opacity 1s ease-in-out;
}
.slider div.active{
    opacity:1;
}
.slide-1{
    background-image:url('images/slide-1.jpg');
    background-size:cover;
}
.slide-2{
    background-image:url('images/slide-2.jpg');
    background-size:cover;
}
.slide-3{
    background-image:url('images/slide-3.jpg');
    background-size:cover;
}
.slide-4{
    background-image:url('images/slide-4.jpg');
    background-size:cover;
}
    !--JS部分-->
    let slideIndex = 0;
    const slides = document.querySelectorAll('.slider div');
 function nextSlide() {
    slides[slideIndex].classList.remove('active');
    slideIndex = (slideIndex + 1) % slides.length;
     slides[slideIndex].classList.add('active');
 }
    setInterval(nextSlide, 5000);
    

以上就是使用CSS制作滑动幻灯片效果的代码，通过CSS实现幻灯片的滑动，在JS中添加自动轮播功能，使得幻灯片能够自动切换，为用户带来便捷和优美的体验。需要注意，CSS和JS代码需要结合HTML文档一起使用，才能够实现预期效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！