实现dedecms首页大图自动切换

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

<script>
    var images = document.querySelectorAll('#slider img');
    var currentIndex = 0;
    var interval = 3000; // 切换间隔时间，单位为毫秒

    function showImage(index) {
        images.forEach(function(img, i) {
            img.classList.remove('active');
        });
        images[index].classList.add('active');
    }

    function nextImage() {
        currentIndex = (currentIndex + 1) % images.length;
        showImage(currentIndex);
    }

    setInterval(nextImage, interval);
</script>

#slider {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

#slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#slider img.active {
    opacity: 1;
}