dedecms 图片滚动

<!-- 示例代码 -->
<div class="scroll">
    <img src="path/to/image1.jpg" alt="Image 1">
    <img src="path/to/image2.jpg" alt="Image 2">
    <img src="path/to/image3.jpg" alt="Image 3">
</div>

<style>
.scroll {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.scroll img {
    width: 100%;
    display: block;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var scroll = document.querySelector('.scroll');
    var images = scroll.querySelectorAll('img');
    var index = 0;

    function moveScroll() {
        scroll.style.transform = 'translateX(-' + (index * 100) + 'vw)';
        index++;
        if (index >= images.length) {
            index = 0;
            scroll.style.transition = 'none';
            setTimeout(function() {
                scroll.style.transition = 'transform 0.5s ease-in-out';
            }, 50);
        }
    }

    setInterval(moveScroll, 3000);
});
</script>

// 调整时间间隔
setInterval(moveScroll, 5000); // 5秒滚动一次

.scroll img {
    transition: transform 0.5s ease-in-out;
}