使用HTML、CSS和JavaScript创建自动播放轮播

使用HTML、CSS和JavaScript创建自动播放轮播是一种很好的方式，可以以视觉上吸引人的方式展示多个图片或内容。在本文中，我们将介绍创建这样一个轮播的步骤。我们还将提供一个实时示例，并说明如何运行应用程序。

在本文中，我们将创建一个自动播放的轮播，显示丰富多彩的内容幻灯片。轮播将在固定间隔时间内自动切换幻灯片。

前提条件

方法

HTML： 创建一个包含内容“carousel-item”元素的“carousel”容器。
CSS： 样式化容器尺寸、背景和条目外观。
JavaScript： 管理“active”类，设置自动旋转的时间间隔（例如每3.5秒），并切换条目。您还可以根据需要自定义内容和调整时间间隔以实现所需的行为。根据需要进行测试和完善。
示例： 这个示例描述了使用HTML、CSS和JavaScript实现自动播放轮播的基本方法。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Autoplay Carousel</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="carousel"> 
        <div class="carousel-item"> 
            <div class="slide-image"
                style="background-image:  
url('https://media.geeksforgeeks.org/img-practice/banner/mern-full-stack-development-classroom-thumbnail.png?v=19625');"> 
            </div> 
        </div> 
        <div class="carousel-item"> 
            <div class="slide-image"
                style="background-image:  
url('https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19625');"> 
            </div> 
        </div> 
        <div class="carousel-item"> 
            <div class="slide-image"
                style="background-image:  
url('https://media.geeksforgeeks.org/img-practice/banner/geeks-classes-live-thumbnail.png?v=19625');"> 
            </div> 
        </div> 
        <div class="carousel-item"> 
            <div class="slide-image"
                style="background-image:  
url('https://media.geeksforgeeks.org/img-practice/banner/gate-crash-course-2024-thumbnail.png?v=19625');"> 
            </div> 
        </div> 
    </div> 
  
    <script src="./script.js"></script> 
</body> 
  
</html>

CSS

* { 
    box-sizing: border-box; 
} 
  
body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
  
.carousel { 
    position: relative; 
    width: 270px; 
    height: 160px; 
    overflow: hidden; 
    background-color: #cdcdcd; 
} 
  
.carousel-item .slide-image { 
    width: 270px; 
    height: 160px; 
    background-size: cover; 
    background-repeat: no-repeat; 
} 
  
.carousel-item { 
    position: absolute; 
    width: 100%; 
    height: 270px; 
    border: none; 
    top: 0; 
    left: 100%; 
} 
  
.carousel-item.active { 
    left: 0; 
    transition: all 0.3s ease-out; 
} 
  
.carousel-item div { 
    height: 100%; 
} 
  
.red { 
    background-color: red; 
} 
  
.green { 
    background-color: green; 
} 
  
.yellow { 
    background-color: yellow; 
} 
  
.violet { 
    background-color: violet; 
}

Javascript

window.onload = function () { 
    let slides =  
        document.getElementsByClassName('carousel-item'); 
  
    function addActive(slide) { 
        slide.classList.add('active'); 
    } 
  
    function removeActive(slide) { 
        slide.classList.remove('active'); 
    } 
  
    addActive(slides[0]); 
    setInterval(function () { 
        for (let i = 0; i < slides.length; i++) { 
            if (i + 1 == slides.length) { 
                addActive(slides[0]); 
                setTimeout(removeActive, 350, slides[i]); 
                break; 
            } 
            if (slides[i].classList.contains('active')) { 
                setTimeout(removeActive, 350, slides[i]); 
                addActive(slides[i + 1]); 
                break; 
            } 
        } 
    }, 1500); 
};