dedecms 图片滚动代码

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

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

<script>
document.addEventListener("DOMContentLoaded", function() {
    let slides = document.querySelector('.slides');
    let slideCount = slides.children.length;
    let index = 0;

    function nextSlide() {
        index++;
        if (index >= slideCount) {
            index = 0;
            slides.style.transition = 'none';
            slides.style.transform = `translateX(0)`;
            setTimeout(() => {
                slides.style.transition = 'transform 0.5s ease-in-out';
            }, 50);
        }
        slides.style.transform = `translateX(-${index * 100}%)`;
    }

    setInterval(nextSlide, 3000); // 每3秒切换一次
});
</script>