旋转木马jquery焦点幻灯特效代码

旋转木马（Carousel）是一种常见的网页设计元素，用于展示一系列图片或内容，并且可以自动或手动切换。jQuery焦点幻灯特效是一种实现旋转木马效果的方法。下面是一个简单的jQuery焦点幻灯特效代码示例：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转木马jQuery焦点幻灯特效</title>
    <link rel="stylesheet" href="styles.css">
</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>
        <button class="carousel-control prev">&#10094;</button>
        <button class="carousel-control next">&#10095;</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.carousel {
    position: relative;
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}

.carousel-item img {
    width: 100%;
    display: block;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.carousel-control.prev {
    left: 10px;
}

.carousel-control.next {
    right: 10px;
}

jQuery脚本

// script.js
$(document).ready(function() {
    let currentIndex = 0;
    const items = $('.carousel-item');
    const totalItems = items.length;

    function moveToNextItem() {
        currentIndex++;
        if (currentIndex >= totalItems) {
            currentIndex = 0;
            $('.carousel-inner').css('transition', 'none');
            $('.carousel-inner').css('transform', `translateX(0)`);
            setTimeout(() => {
                $('.carousel-inner').css('transition', 'transform 0.5s ease-in-out');
            }, 50);
        }
        $('.carousel-inner').css('transform', `translateX(-${currentIndex * 100}%)`);
    }

    function moveToPrevItem() {
        currentIndex--;
        if (currentIndex < 0) {
            currentIndex = totalItems - 1;
            $('.carousel-inner').css('transition', 'none');
            $('.carousel-inner').css('transform', `translateX(-${(totalItems - 1) * 100}%)`);
            setTimeout(() => {
                $('.carousel-inner').css('transition', 'transform 0.5s ease-in-out');
            }, 50);
        }
        $('.carousel-inner').css('transform', `translateX(-${currentIndex * 100}%)`);
    }

    $('.carousel-control.next').click(moveToNextItem);
    $('.carousel-control.prev').click(moveToPrevItem);

    setInterval(moveToNextItem, 3000); // 自动切换时间间隔
});