用CSS實現一個輪播圖

王铁柱6發表於2024-12-02
CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Carousel</title>
    <style>
        .carousel-container {
            width: 600px;
            height: 300px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }

        .carousel-slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
            width: 300%; /* 3 times the width of the container for 3 images */
        }

        .carousel-slide {
            width: calc(100% / 3); /* Each slide takes 1/3 of the container width */
            flex-shrink: 0; /* Prevent slides from shrinking */
        }

        .carousel-slide img {
            width: 100%;
            height: 100%;
            display: block; /* Prevent small gap below image */
        }

        .carousel-navigation {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .carousel-navigation button {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 5px 10px;
            margin: 0 5px;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<div class="carousel-container">
    <div class="carousel-slides">
        <div class="carousel-slide">
            <img src="image1.jpg" alt="Image 1">
        </div>
        <div class="carousel-slide">
            <img src="image2.jpg" alt="Image 2">
        </div>
        <div class="carousel-slide">
            <img src="image3.jpg" alt="Image 3">
        </div>
    </div>
    <div class="carousel-navigation">
        <button id="prev">Prev</button>
        <button id="next">Next</button>
    </div>
</div>

<script>
    const slides = document.querySelector('.carousel-slides');
    const prevButton = document.getElementById('prev');
    const nextButton = document.getElementById('next');
    let slideIndex = 0;

    nextButton.addEventListener('click', () => {
        slideIndex++;
        if (slideIndex > 2) { slideIndex = 0; }
        slides.style.transform = `translateX(-${slideIndex * 100 / 3}%)`;
    });

    prevButton.addEventListener('click', () => {
        slideIndex--;
        if (slideIndex < 0) { slideIndex = 2; }
        slides.style.transform = `translateX(-${slideIndex * 100 / 3}%)`;
    });

</script>

</body>
</html>

Explanation and Key improvements:

  • HTML Structure: Sets up the container, slides, and navigation buttons. Uses semantic HTML where possible.
  • CSS Styling: Styles the carousel for basic appearance and layout. overflow: hidden on the container is crucial. calc(100% / 3) dynamically sizes slides based on the number of images. flex-shrink: 0 prevents layout issues.
  • JavaScript Functionality:
    • Uses slideIndex to track the current slide.
    • translateX in the JavaScript moves the slides container. The calculation -${slideIndex * 100 / 3}% is key for correct positioning.
    • Wraps around when reaching the first or last slide.
  • Image Placeholders: Uses image1.jpg, image2.jpg, and image3.jpg as placeholders. Replace these with your actual image URLs.
  • Responsive Design (Consideration): This example has a fixed width. For responsive design, you'll want to use relative units like percentages or viewport units for the container width.

This improved example provides a functional and more robust CSS carousel. You

相關文章