如何使用HTML CSS和JavaScript创建图像幻灯片

在本文中，我们将使用HTML、CSS和JavaScript创建一个图像幻灯片。

HTML和CSS用五个HTML div、一个左箭头、三个幻灯片和一个右箭头设计HTML页面，其id或类名为arrow-left、slide1、slide2、slide3和arrow-right。通过点击这些箭头，我们可以使用自定义的JavaScript函数slideLeft()和slideRight()来查看这些图像幻灯片。这些函数使用JavaScript中的addEventListener()方法，该方法用于监听箭头的点击事件。

方法： 在这个方法中，我们使用HTML、CSS和JavaScript来创建一个图像幻灯片，以下是创建幻灯片的一些步骤：

HTML部分： 该部分包含页面的HTML部分。需要显示的幻灯片通过其对应的文本进行定义。

CSS部分： 该部分包含了所有要使用的样式，以创建幻灯片显示。设置左右箭头的margin-left和margin-right属性以适应每个幻灯片的要求。这样就使其呈现为图像幻灯片。所有的幻灯片都有background-image属性，该属性是幻灯片中使用的图像的URL。

JavaScript部分： 该部分处理用户定义的JavaScript函数slideLeft()和slideRight()。这些函数使用addEventListener()方法监听箭头的点击事件。 ****以下代码是上述HTML代码中使用的“script.js”文件的内容。

示例： 在这个示例中，我们使用上述解释的方法。

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Image Slider</title>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <script src=
        "https://code.jquery.com/jquery-3.6.0.min.js ">
    </script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>
 
<body>
    <div id="arrow-left" class="arrow"></div>
    <div class="slide slide1"></div>
    <div class="slide slide2"></div>
    <div class="slide slide3"></div>
    <div id="arrow-right" class="arrow"></div>
</body>
 
</html>

CSS

.slide {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
 
.slide1 {
    background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221217/pic1.png");
}
 
.slide2 {
    background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221254/pic2.png");
}
 
.slide3 {
    background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221322/pic3.png");
}
 
.arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    width: 0;
    height: 0;
    border-style: solid;
}
 
#arrow-left {
    border-width: 20px 30px 20px 0;
    border-color: transparent #fff transparent transparent;
    left: 0;
    margin-left: 20px;
}
 
#arrow-right {
    border-width: 20px 0 20px 30px;
    border-color: transparent transparent transparent #fff;
    right: 0;
    margin-right: 20px;
}

JavaScript

let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;
 
// Clear all images
function reset() {
    for (let i = 0; i < sliderImages.length; i++) {
        sliderImages[i].style.display = "none";
    }
}
 
// Initial slide
function startSlide() {
    reset();
    sliderImages[0].style.display = "block";
}
 
// Show previous
function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = "block";
    current--;
}
 
// Show next
function slideRight() {
    reset();
    sliderImages[current + 1].style.display = "block";
    current++;
}
 
// Left arrow click
arrowLeft.addEventListener("click", function () {
    if (current === 0) {
        current = sliderImages.length;
    }
    slideLeft();
});
 
// Right arrow click
arrowRight.addEventListener("click", function () {
    if (current === sliderImages.length - 1) {
        current = -1;
    }
    slideRight();
});
 
startSlide();

输出:

如何使用HTML CSS和JavaScript创建图像幻灯片