dedecms 图片轮播

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

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

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("slides")[0].getElementsByTagName("img");
        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>

<style>
    .slider {
        width: 100%;
        overflow: hidden;
    }
    .slides {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }
    .slides img {
        width: 100%;
        flex-shrink: 0;
    }
</style>