js旋转木马带轮播点

基础概念

旋转木马（Carousel）是一种常见的网页设计元素，用于展示一系列项目（如图片、文本等），并且这些项目会自动或手动地在有限的可视区域内循环滚动。轮播点（Navigation Dots）则是用来指示当前显示项目的位置，并允许用户通过点击这些点来跳转到特定的项目。

类型

水平旋转木马：项目从左到右或从右到左滚动。
垂直旋转木马：项目从上到下或从下到上滚动。
无限循环旋转木马：项目在到达末尾后会无缝地回到开始位置。

应用场景

首页展示：用于展示网站的最新内容或特色服务。
产品展示页：用于展示多个产品的缩略图和详细信息。
新闻网站：用于循环展示最新的新闻标题和摘要。

示例代码

以下是一个简单的JavaScript旋转木马带轮播点的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel with Navigation Dots</title>
    <style>
        .carousel {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .carousel-item {
            min-width: 100%;
            box-sizing: border-box;
        }
        .nav-dots {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }
        .nav-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
        .nav-dot.active {
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="carousel" id="carousel">
        <div class="carousel-inner" id="carouselInner">
            <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 class="nav-dots" id="navDots"></div>
    </div>

    <script>
        const carouselInner = document.getElementById('carouselInner');
        const navDotsContainer = document.getElementById('navDots');
        const items = document.querySelectorAll('.carousel-item');
        let currentIndex = 0;

        function createNavDots() {
            items.forEach((item, index) => {
                const dot = document.createElement('div');
                dot.classList.add('nav-dot');
                dot.addEventListener('click', () => goToSlide(index));
                navDotsContainer.appendChild(dot);
            });
            updateNavDots();
        }

        function updateNavDots() {
            const dots = document.querySelectorAll('.nav-dot');
            dots.forEach((dot, index) => {
                if (index === currentIndex) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
        }

        function goToSlide(index) {
            currentIndex = index;
            const offset = -currentIndex * 100;
            carouselInner.style.transform = `translateX(${offset}%)`;
            updateNavDots();
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % items.length;
            goToSlide(currentIndex);
        }

        function prevSlide() {
            currentIndex = (currentIndex - 1 + items.length) % items.length;
            goToSlide(currentIndex);
        }

        createNavDots();

        // Optional: Auto-play functionality
        setInterval(nextSlide, 3000);
    </script>
</body>
</html>