JavaScript 使用自动图片轮播

一个 图片轮播 是现代网站中常见的组件，它允许在一个位置上显示多张图片，通常以滑动的方式进行。通过使用 JavaScript ，创建自动图片轮播变得更加简单。在本文章中，我们将讨论如何使用JavaScript创建自动图片轮播。

步骤1：HTML标记

第一步是为图片轮播创建HTML标记。标记将包含一个无序列表（<ul>），其中将保存所有的图片。每个列表项（<li>）将包含一张图片和一个标题。以下是一个示例：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Image Slider</title> 
      <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="slider"> 
        <ul> 
            <li> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230329113637/image1.png" 
                    alt="GFG Image 1"> 
                <div class="caption"> 
                    Geeks for Geeks 
                </div> 
            </li> 
            <li> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230329113637/image2.jpeg" 
                    alt="GFG Image 2"> 
                <div class="caption"> 
                    Geeks for Geeks 
                </div> 
            </li> 
            <li> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230329113638/image3.jpeg" 
                    alt="GFG Image 3"> 
                <div class="caption"> 
                    Geeks for Geeks 
                </div> 
            </li> 
            <li> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230329113638/image4.jpeg" 
                    alt="GFG Image 4"> 
                <div class="caption"> 
                    Geeks for Geeks 
                </div> 
            </li> 
        </ul> 
    </div> 
</body> 
  
</html>

步骤2：CSS样式

第二步是为图像滑块应用一些CSS样式。以下是一个示例：

CSS

.slider { 
    width: 100%; 
    position: relative; 
} 
  
.slider ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
  
.slider li { 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
} 
  
img { 
    height: 400px; 
    width: 400px; 
} 
  
.slider li.active { 
    opacity: 1; 
} 
  
.slider .caption { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.5); 
    color: #fff; 
    font-size: 18px; 
    padding: 10px; 
    text-align: center; 
}

步骤3：JavaScript代码

最后一步是编写JavaScript代码来创建一个自动的图片滑动器。我们将使用setInterval()方法在固定的时间间隔内切换图片。以下是一个例子：

Javascript

const slider = document.querySelector('.slider'); 
const slides = slider.querySelectorAll('li'); 
  
// Store the total number of images 
const slideCount = slides.length; 
let activeSlide = 0; 
  
// To change the images dynamically every  
// 5 Secs, use SetInterval() method 
setInterval(() => { 
    slides[activeSlide].classList.remove('active'); 
    activeSlide++; 
    if (activeSlide === slideCount) { 
        activeSlide = 0; 
    } 
    slides[activeSlide].classList.add('active'); 
}, 5000);

在JavaScript代码中，我们首先使用querySelectorAll()方法选择滑块元素和所有的幻灯片元素。我们还将幻灯片总数存储在slideCount变量中，并将初始活动幻灯片设置为0。

然后我们使用setInterval()方法每5000毫秒（或5秒）执行匿名函数。在函数内部，我们从当前幻灯片中移除’active’类，并将activeSlide变量增加1。如果activeSlide变量等于slideCount，则将其重置为0。最后，我们将’active’类添加到新的活动幻灯片中。

输出：

JavaScript 使用自动图片轮播