css上下按钮实现图片轮播

发表于前端技术学习版块 css,教程

CSS上下按钮实现图片轮播是指使用CSS编写上下按钮的样式，并结合JavaScript实现通过按钮控制图片的轮播效果。下面是一份基本的实现代码：<html> &lt

CSS上下按钮实现图片轮播是指使用CSS编写上下按钮的样式，并结合JavaScript实现通过按钮控制图片的轮播效果。下面是一份基本的实现代码：

<html>

  <head>
    <style>
      .carousel {
        position: relative;
        height: 400px;
        overflow: hidden;
      }
      
      .carousel img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.6s ease-in-out;
      }
      
      .carousel img.active {
        opacity: 1;
      }
      
      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
      
      .arrow.up {
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
      }
      
      .arrow.down {
        left: 50%;
        transform: translate(-50%, -50%) rotate(135deg);
      }
    </style>
  </head>

  <body>
    <div class="carousel">
      <img src="image1.jpg" class="active">
      <img src="image2.jpg">
      <img src="image3.jpg">
      <div class="arrow up"></div>
      <div class="arrow down"></div>
    </div>

    <script>
      var currentSlide = 0;
      var slides = document.getElementsByTagName("img");
      var numSlides = slides.length;

      function showNextSlide() {
        slides[currentSlide].classList.remove("active");
        currentSlide = (currentSlide + 1) % numSlides;
        slides[currentSlide].classList.add("active");
      }

      function showPreviousSlide() {
        slides[currentSlide].classList.remove("active");
        currentSlide = (currentSlide - 1 + numSlides) % numSlides;
        slides[currentSlide].classList.add("active");
      }

      document.querySelector(".arrow.up").addEventListener("click", showPreviousSlide);
      document.querySelector(".arrow.down").addEventListener("click", showNextSlide);
    </script>
  </body>

</html>

代码中，我们首先定义了一个名为.carousel的样式，用于包裹轮播图。其中，overflow: hidden;用于隐藏轮播图外的部分。在.carousel内部，我们设置了三张图片，并将它们的position属性设为absolute。这是因为我们将在JavaScript中通过更改active类的方式来实现图片的轮播，而position:absolute会使得图片不会相互影响，从而避免了闪烁的现象。我们还为图片设置了transition属性，这样就能够实现渐变切换的效果。

接着，我们定义了名为.arrow的样式，用于设定上下按钮。我们使用了位置定位和旋转的方式来创建箭头的图形。最后，在JavaScript中，我们定义了两个函数showNextSlide和showPreviousSlide，用于实现图片的轮播效果。我们还赋予了上下按钮点击事件，并调用这两个函数以实现通过按钮控制图片的轮播效果。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。