如何使用 HTML、CSS 和 JavaScript 创建图像滑块

在本文中，您将学习如何使用 HTML 和 CSS 创建图像滑块。之前，我曾与您分享过多种自动和手动图像滑块的设计。

这是一个漂亮的 CSS 图片滑块设计，包含四张图片和两个用于切换图片的导航按钮。我借助 JavaScript 实现了导航按钮的功能。

观看现场演示，了解它的工作原理。首先，我在网页上创建了一个框。然后，我在这里添加了四张图片，并在每侧使用了两个按钮。图片下方有四个指示点，用于帮助切换图片并指示已打开的图片数量。

这里我使用了 HTML、CSS 和 JavaScript。HTML、CSS 帮助设计并根据需要添加图像。使用 JavaScript 实现了图像更改。

步骤 1：创建图像滑块的基本结构

我使用下面的 HTML 和 CSS 代码创建了一个框。在这个框中，我添加了图片和用于更改图片的按钮。html 图像滑块width: 500px和height: 350px。

<div class="container">

</div>

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    background: #0690e6;
}

.container{
    background-color: #ffffff;
    width: 500px;
    height: 350px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

第 2 步：将图像添加到图像滑块

现在我已经在框中添加了图片。这里我用了四张图片。我添加了一个 active 标签来激活第一张图片。图片width: 460px和高度均为 280px。

这里display: none使用了，可以完全隐藏图像。然后我添加了display: block，可以帮助再次看到图像。

在第一幅图像的情况下我使用了“活动”，因此在这种情况下可以看到第一幅图像。

<div class="image-container">
    <img src="img1.jpg" id="content1" class="active">
    <img src="img2.jpg" id="content2">
    <img src="img3.jpg" id="content3">
    <img src="img4.jpg" id="content4">
</div>

.image-container{
    position: relative;
}

img{
    position: relative;
    width: 460px;
    height: 280px;
    display: none;
}

.active{
    display: block;
}

步骤 3：创建图像指标

现在我为四张图片创建了四个点。如果您使用更多图片，则需要增加这里的点数。我借助按钮来制作这些点。每个点的宽度为 50px，height: 15px这里的背景颜色完全透明。

<div class="dot-container">
   <button onclick = "dot(1)"></button>
   <button onclick = "dot(2)"></button>
   <button onclick = "dot(3)"></button>
   <button onclick = "dot(4)"></button>
</div>

.dot-container{
    width: 250px;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

button{
    outline: none;
    cursor: pointer;
}

.dot-container button{
    height: 15px;
    width: 50px;
    border-radius: 10%;
    border: 3px solid #076bb8;
    background-color: transparent;
}

.dot-container button:nth-child(1){
    background-color: #076bb8;
}

步骤 4：创建两个按钮来更改图像

现在我创建了两个按钮来更改图像。这两个按钮的宽度和高度均为 40px，并且position: absolute已使用。position: absolute 有助于将这些按钮放置在特定位置。

<button id="prev" onclick="prev()"> &lt; </button>
<button id="next" onclick="next()"> &gt; </button>

#prev,#next{
    height: 40px;
    width: 40px;
    position: absolute;
    background-color: #076bb8;
    color: #ffffff;
    margin: auto;
    top: 0;
    bottom: 0;
    border: none;
    border-radius: 3px;
    font-size: 18px;
    font-weight: bolder;
}

#prev{
    left: 5px;
}

#next{
    right: 5px;
}

步骤 6：使用 JavaScript 激活图像滑块

现在是时候使用 JavaScript 实现图像变化了。现在我已经确定了点和图像的常量。

const dots = document.querySelectorAll(".dot-container button");
const images = document.querySelectorAll(".image-container img");

let i = 0; // current slide
let j = 4; // total slides

现在，我使用 JavaScript 执行了“下一步”按钮。这将有助于查看下一张图片。这里我使用了一些基本计算来实现它。如果你懂 JavaScript，就能轻松理解。

function next(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = ( j + i + 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator( i+ 1 );
}

现在 Previs 按钮已经激活。点击预览按钮，即可看到预览图像。

function prev(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = (j + i - 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator(i+1);
}

现在我已经激活了指示器。指示器可以帮助你了解哪个图像处于打开状态。当你使用按钮切换图像时，指示器也会随之变化。

function indicator(num){
    dots.forEach(function(dot){
        dot.style.backgroundColor = "transparent";
    });
    document.querySelector(".dot-container button:nth-child(" + num + ")").style.backgroundColor = "#076bb8";
}

现在我已经指示指示器更改图像。在此 html css 图像滑块中，您可以借助指示器更改图像。

function dot(index){
    images.forEach(function(image){
        image.classList.remove("active");
    });
    document.getElementById("content" + index).classList.add("active");
    i = index - 1;
    indicator(index);
}

这是一个美观简洁的图像滑块设计，我借助 HTML、CSS 和 JavaScript 制作。如果您在创建此设计（如何在 HTML 中创建图像滑块）时遇到任何困难，请在评论中告诉我Like it if you like this tutorial。

相关文章：

您可以访问我的博客以获取更多类似的教程。😊
https://www.foolishdeveloper.com/

文章来源：https://dev.to/shantanu_jana/how-to-create-an-image-slider-using-html-css-and-javascript-mo0