dedecms 幻灯片代码

<div class="slider">
    <div class="slides">
       <div><img src="path/to/image1.jpg" alt="Image 1"></div>
       <div><img src="path/to/image2.jpg" alt="Image 2"></div>
       <div><img src="path/to/image3.jpg" alt="Image 3"></div>
    </div>
</div>

<style>
.slider {
    width: 100%;
    overflow: hidden;
}
.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.slides div {
    min-width: 100%;
    box-sizing: border-box;
}
</style>

<script>
let slideIndex = 0;
showSlides();

function showSlides() {
    let i;
    let slides = document.getElementsByClassName("slides")[0].getElementsByTagName("div");
    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
}
</script>