[ TUTORIAL ] 使用JavaScript创建一个简单的图像轮播

查看我的博客以获取更多文章，或者查看Github获取我的免费阅读的JavaScript电子书，其中涵盖了ES6到2019年的所有新功能。
如果您想找到一个交互式教程的好地方，我建议您在Educative（免责声明：它的附属链接）上完成我的JavaScript价格的学习。

JavaScript轮播

  • 难度等级：初学者
  • 时长：1 Hour
  • Github存储库：https://github.com/AlbertoMontalesi/InspiredWebDev-Tutorials/tree/master/javascript_carousel

在本教程中，您将学习如何创建一个简单的旋转木马，如下图所示。

我们将只使用HTML和CSS以及一些JavaScript。

在开始创建轮播的结构之前，请继续将此代码粘贴到 head 您的html文件：

      href="https://fonts.googleapis.com/css?family=Roboto:400,700"  rel="stylesheet">

我们将使用Roboto作为我们项目的字体。

创建HTML结构

对于轮播的结构，我们不需要很多元素：

  • 一种 container
  • 一种 wrapper 每张幻灯片
  • 3张不同的幻灯片 
     class="container">
             class="row">
                
Testimonials

                 id="slider">
                     class="button-left slider-button">
                         < span>
class="button-right slider-button"> >
class="slide slide1 showing"> class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur ullamcorper convallis. Suspendisse quis imperdiet nisi, et accumsan enim. Donec tempus mi ex, ac.
class="slide-testimonial"> class="slide-img"> alt="testimonial" src="./images/testimonial1.jpg">
class="slide-person">

Jane Doe

CEO Company x

这将是我们轮播的结构。正如您所看到的，我只粘贴了第一张幻灯片的代码，继续添加另外两个，选择图片和所需的说明。

CSS样式

让我们开始设计旋转木马的样式。粘贴以下代码，将一些基本样式应用于轮播的主体和盘点：

    :root {
        /* we define some variables to hold our colors*/
        --bg-section: #374057;
        --color-headers: #2c3e50;
        --color-highlight-green: #00AF4E;
        --color-light-gray: #EEEFF2;
    }

    * {
        /* apply our google font */
        font-family: 'Roboto', sans-serif;
        padding: 0;
        margin: 0;
        text-decoration: none;
        font-size: 16px;
    }

    body {
        /* make the body full height */
        position: relative;
        height: 100vh;
        background-color: var(--bg-section);
        display: flex;
    }

    /* position our container in the middle */
    .container {
        width: 900px;
        margin: auto;
        padding: 20px;
    }

    /* style the header */
    h1 {
        font-size: 2rem;
        color: white;
        text-align: center;
    }

太棒了，现在是时候进入真正的轮播了。

    /*create slider */
    #slider {
        position: relative;
        height: 300px;
        padding: 0;
        margin: 0;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .slide {
        /* we position the slide absolutely compared to its parent #slider */
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        /* change the value for a faster or slower transition between slides */
        -webkit-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }

    /* class to show the current slide */
    .showing {
        opacity: 1;
        z-index: 2;
    }

    .slide-text {
        background-color: white;
        border-radius: 10px;
        margin: auto;
        padding: 40px;
        padding-left: 60px;
        position: relative;
    }

    /* create the notch */
    .slide-text:after {
        content: '';
        display: block;
        position: absolute;
        bottom: -20px;
        left: calc(50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 26px 0 0;
        border-color: white transparent transparent transparent;
    }

    /* align the testimonial in the center */
    .slide-testimonial {
        margin-top: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .slide-img {
        margin: 10px;
    }

    .slide-img img {
         width: 100px;
        height: 100px; 
        border-radius: 50%;
        border: 4px solid white;
    }

    .slide-person {
        margin-left: 20px;
    }

    .slide-person p {
        padding: 5px;
    }

    /* make the name of the person bold */
    .slide-person p:first-of-type {
        color: white;
        font-weight: bold;
        font-size: 1.2rem;
    }

    /* make their job title light gray */
    .slide-person p:last-of-type {
        color: var(--color-light-gray);
    }

    /* position the buttons and make them green */
    .slider-button {
        cursor: pointer;
        color: white;
        font-weight: bold;
        width: 40px;
        height: 40px;
        background-color: var(--color-highlight-green);
        z-index: 3;
        position: absolute;
        text-align: center;
        border-radius: 20%;
        -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    /*posion the left an right button horizontally */
    .button-left {
        position: absolute;
        left: -10px;
    }

    .button-right {
        position: absolute;
        right: -10px;
    }

我们应用了一些简单的样式并利用了 flexbox 创建我们想要的布局。如果您想知道为什么我要重复一些样式，例如：

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

这称为前缀，用于确保我们的css在所有浏览器上均可使用。您可以使用诸如Autoprefixer之类的代码作为前缀，并确保无论用户使用哪种浏览器，他们都会以您期望的方式体验您的应用程序/网站。

使滑块与JavaScript一起使用

现在，我们的滑块不起作用，我们需要编写一些JavaScript才能在按下按钮时更改幻灯片。将此代码复制到您的 script.js 文件

    document.addEventListener("DOMContentLoaded", () => {

        // grab all the slides 
        let slides = document.querySelectorAll("#slider .slide");
        // set initial slide
        let currentSlide = 0;
        //grab both buttons
        const nextButton = document.querySelector(".button-right");
        const prevButton = document.querySelector(".button-left");

        function nextSlide() {
            // current slide becomes hidden
            slides(currentSlide).className = 'slide';
            // set the current slide as the next one
            currentSlide = (currentSlide + 1) % slides.length;
            // add the class showing to the slide to make it visible
            slides(currentSlide).className = 'slide showing';
        }

        function prevSlide() {
            // current slide becomes hidden
            slides(currentSlide).className = 'slide';
             // set the current slide as the previous one
            currentSlide = (currentSlide - 1) % slides.length;
             // add the class showing to the slide to make it visible
            slides(currentSlide).className = 'slide showing';
        }

        nextButton.addEventListener("click", () => {
            // go to next slide on click of the button
            nextSlide();
        });
        prevButton.addEventListener("click", () => {
            // go to previous slide on click of the button
            prevSlide();
        });

        /* VERTICALLY ALIGN THE BUTTONS IN THE MIDDLE OF THE SLIDER TEXT
         */
        function positionSliderButton() {
            // grab the slider
            let slider = document.querySelector('.slide-text');
            // grab its height
            let sliderHeight = slider.getBoundingClientRect().height;
            // grab the button
            let buttons = document.querySelectorAll('.slider-button');

            // for each of the buttons
            for (button of buttons) {
                // get their height
                let buttonHeight = button.getBoundingClientRect().height;
                // position them right in the middle of the text,
                button.style.top = (((sliderHeight - buttonHeight) / 2).toString()) + "px";
            }
        }
        positionSliderButton();

        // whenever the window is resize, reposition the buttons
        window.addEventListener('resize', () => {
            positionSliderButton();
        });

    });

我们正在做的事情很简单：

该代码的第二部分用于确保我们的按钮始终位于幻灯片文本的中间。我想通过这种方式向您展示一个很酷的属性： button.getBoundingClientRect().height; 我们曾经抓住按钮的高度。我用过 window.addEventListener('resize', () => { positionSliderButton(); }); 确保每当用户调整页面大小时，按钮都会移动以保持正确的位置

非常感谢您的阅读。在DevTo上关注我，或在我的博客上访问我的启发网站。

书本横幅

在Amazon和Leanpub上获取我的电子书

资讯来源：由0x资讯编译自DEV，原文：https://dev.to/albertomontalesi/tutorial-create-a-simple-image-carousel-with-javascript-3i14 ，版权归作者所有，未经许可，不得转载
你可能还喜欢

监控 Linux 中的文件和目录更改

实时Linux服务器性能监控工具

12 个适合 Linux 用户的最佳免费命令行游戏

2024 年 Linux 用户必备的 5 个 AI 工具

加快 Ubuntu 上的 APT 软件包下载速度

BMC 收购 Netreo