原生JS实现页面轮播图效果 | 青训营

62 阅读1分钟

前言

在字节跳动青训营课程中,我学习到了JavaScript这门编程语言,于是在学习的过程中想通过原生JS去实现在页面当中的一些组件。

轮播图实现

实现效果

  • 图片自动播放效果。
  • 点击图片左右按钮,实现图片左右切换效果。

实现技术

  • 采用HTML+CSS+JavaScript实现。
  • JS部分逻辑采用ES6语法。

代码实现

HTML

 <div class="carousel-out">
        <div class="carousel">
            <div class="slides">
                <img src="./imgs/1.jpeg" id="img-1" alt="">
                <img src="./imgs/2.jpeg" id="img-2" alt="">
                <img src="./imgs/3.jpeg" id="img-3" alt="">
            </div>
            <button class="prev"><img src="./imgs/icon.png" /></button>
            <button class="next"><img src="./imgs/icon.png" /></button>
        </div>
    </div>
  1. 三个img元素存储需要切换的轮播图。
  2. 俩个button元素分别实现左右切换照片。

CSS

.carousel-out {
    width: 100%;
    background-color: rgba(186, 50, 41, 0.1);
}

.carousel {
    position: relative;
    margin: 0 auto;
    width: 800px;
    height: 500px;
    overflow: hidden;
  }
  .slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 2400px;
    transition: all 0.5s;
  }
  .slides img {
    width: 800px;
    height: 500px;
    float: left;
    object-fit: cover;
  }
  .prev,
  .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    font-size: 20px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
  }
  .prev img {
    width: 25px;
    height: 25px;
    transform: rotate(180deg);
  }
  .next img {
    width: 25px;
    height: 25px;
  }
  .prev {
    left: 10px;
  }
  .next {
    right: 10px;
  }

JS

var carousel = document.querySelector('.carousel');
    var slides = document.querySelector('.slides');
    var prevButton = document.querySelector('.prev');
    var nextButton = document.querySelector('.next');
    let slidePosition = 0;
    var slideWidth = 800;
    var slidesNumber = 3;
    function updateSlidePosition() {
        slides.style.transform = `translateX(-${slidePosition}px)`;
    }
    function moveToNextSlide() {
        if (slidePosition === slideWidth * (slidesNumber - 1)) {
            slidePosition = 0;
        } else {
            slidePosition += slideWidth;
        }

        updateSlidePosition();
    }
    function moveToPrevSlide() {
        if (slidePosition === 0) {
            slidePosition = slideWidth * (slidesNumber - 1);
        } else {
            slidePosition -= slideWidth;
        }
        updateSlidePosition();
    }
    function startSlideShow() {
        setInterval(() => {
            moveToNextSlide();
        }, 3000);
    }
    nextButton.addEventListener('click', () => {
        moveToNextSlide();
    });
    prevButton.addEventListener('click', () => {
        moveToPrevSlide();
    });
    startSlideShow();

这样一个简易轮播图就实现成功了。

注:JS部分采用了ES6写法,有问题随时评论哦。