jquery 仿腾讯图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 图片轮播</title>
    <style>
        .carousel {
            width: 300px;
            overflow: hidden;
            position: relative;
        }
        .carousel-inner {
            display: flex;
            transition: transform 0.5s;
        }
        .carousel-item {
            min-width: 100%;
        }
        .carousel-item img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div class="carousel-inner">
            <div class="carousel-item"><img src="image1.jpg" alt="Image 1"></div>
            <div class="carousel-item"><img src="image2.jpg" alt="Image 2"></div>
            <div class="carousel-item"><img src="image3.jpg" alt="Image 3"></div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentIndex = 0;
            const $carouselInner = $('.carousel-inner');
            const itemCount = $('.carousel-item').length;

            function moveToNextItem() {
                currentIndex = (currentIndex + 1) % itemCount;
                const offset = -currentIndex * 100;
                $carouselInner.css('transform', `translateX(${offset}%)`);
            }

            setInterval(moveToNextItem, 3000); // 每3秒切换一次图片
        });
    </script>
</body>
</html>

function preloadImages(images) {
    images.forEach(image => {
        const img = new Image();
        img.src = image;
    });
}

preloadImages(['image1.jpg', 'image2.jpg', 'image3.jpg']);