网页轮播js

function slideTo(index) {
    const items = document.querySelectorAll('.carousel-item');
    items.forEach((item, i) => {
        item.style.display = i === index ? 'block' : 'none';
    });
}

let currentIndex = 0;
function nextSlide() {
    currentIndex = (currentIndex + 1) % document.querySelectorAll('.carousel-item').length;
    slideTo(currentIndex);
}

setInterval(nextSlide, 3000); // 每3秒切换一次

.carousel-container {
    display: flex;
    overflow: hidden;
}

.carousel-item {
    min-width: 100%;
    transition: transform 0.5s ease-in-out;
}

@media (max-width: 768px) {
    .carousel-item {
        min-width: 50%;
    }
}

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy-load">

document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = [].slice.call(document.querySelectorAll("img.lazy-load"));
    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy-load");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    }
});