dedecms滚动图

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

/* 示例CSS */
.slider {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.slider img {
    width: 100%;
    height: auto;
    display: none;
}

.slider img:first-child {
    display: block;
}

// 示例JavaScript
var images = document.querySelectorAll('.slider img');
var index = 0;

function showImage() {
    images.forEach(function(img) {
        img.style.display = 'none';
    });
    images[index].style.display = 'block';
}

function nextImage() {
    index++;
    if (index >= images.length) {
        index = 0;
    }
    showImage();
}

setInterval(nextImage, 3000);

/* 示例CSS3动画 */
.slider img {
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slider img.active {
    opacity: 1;
}

// 示例JavaScript
var images = document.querySelectorAll('.slider img');
var index = 0;

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

function nextImage() {
    index++;
    if (index >= images.length) {
        index = 0;
    }
    showImage();
}

setInterval(nextImage, 3000);