原生js实现简单轮播图效果

2023年6月11日下午1:55 • JavaScript

下面我来详细讲解如何用原生JS实现简单轮播图效果。

步骤1：HTML结构

我们首先需要在HTML文件中创建轮播图的骨架，通常可以使用<ul>标签和若干个<li>标签来实现。例如：

<div id="slider">
  <ul>
    <li><img src="slide1.jpg"></li>
    <li><img src="slide2.jpg"></li>
    <li><img src="slide3.jpg"></li>
    <li><img src="slide4.jpg"></li>
  </ul>
</div>

在这个例子中，我们创建了id为slider的<div>容器，内部并排放置了四张图片。这是一个非常基本的轮播图结构。

步骤2：CSS样式

接下来，我们需要给轮播图添加样式，让它具有更好的外观和交互效果。例如：

#slider {
  position: relative; /* 使内层元素定位不受影响 */
}
#slider ul {
  list-style: none; /* 去掉默认的列表样式 */
  margin: 0; /* 去掉内外边距 */
  padding: 0;
  position: relative; /* 用于控制内层元素定位 */
}
#slider li {
  float: left; /* 让内层元素横向排列 */
  position: relative; /* 使内层元素定位不受影响 */
}
#slider img {
  width: 100%; /* 让图片充满整个容器 */
  display: block; /* 去掉图片默认的行内样式 */
}

这段样式代码可以让轮播图的图片在不同屏幕大小下呈现出较为美观的效果。

步骤3：JS实现

最后一步是实现轮播图的基本功能。这里我们需要用到JS来控制轮播图的轮播和事件绑定等操作。

首先，在JS代码中获取轮播图的元素，在这里我们获取的是id为slider的<div>元素：

var slider = document.getElementById("slider");

然后，我们需要获取它下面的<ul>和<li>元素，并计算轮播图的总宽度和当前偏移量：

var sliderWrapper = slider.getElementsByTagName("ul")[0];
var sliderItems = sliderWrapper.getElementsByTagName("li");
var sliderWidth = slider.offsetWidth;
var sliderOffset = 0;

接下来，我们需要编写轮播方法，用来将轮播图向左或右平移一定的距离。例如，以下代码是将轮播图向左平移的方法：

function slideLeft() {
  sliderOffset += sliderWidth;
  if (sliderOffset > sliderWidth * sliderItems.length) {
    sliderOffset = 0;
  }
  sliderWrapper.style.left = -sliderOffset + "px";
}

方法中主要完成了以下几个操作：

首先将偏移量增加一个轮播图的宽度；
然后判断偏移量是否越界，如果越界则复位到0；
最后将轮播图进行位移操作，以向左平移整个轮播图。

于是，我们就可以通过事件绑定来触发轮播图的滚动效果，例如以下代码将点击事件绑定在了向左和向右按钮上：

document.getElementById("btnPrevious").addEventListener("click", slideRight);
document.getElementById("btnNext").addEventListener("click", slideLeft);

完整的代码示例可以参考以下内容。本示例中将轮播图及事件绑定都进行了封装，并注释了部分关键代码，帮助读者更好地理解轮播图实现原理。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简单轮播图示例</title>
    <style>
      #slider {
        position: relative;
      }
      #slider ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        transition: all 0.5s ease-in-out;
        /* 注： transition属性控制了图片的平滑过渡效果 */
      }
      #slider li {
        float: left;
        position: relative;
      }
      #slider img {
        width: 100%;
        display: block;
      }
      .btn {
        width:50px;
        height:50px;
        position:absolute;
        top:50%;
        margin-top:-25px;
        background-color:black;
        color:white;
        font-size:20px;
        text-align:center;
        line-height:50px;
        cursor:pointer;
        opacity: 0.5;
        transition: opacity 0.3s ease-in-out;
        /* 注： opacity属性控制了按钮的半透明效果 */
      }
      .btn:hover {
        opacity: 1;
      }
      #btnPrevious {
        left: 0;
      }
      #btnNext {
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="slider">
      <ul>
        <li><img src="slide1.jpg"></li>
        <li><img src="slide2.jpg"></li>
        <li><img src="slide3.jpg"></li>
        <li><img src="slide4.jpg"></li>
      </ul>
      <div id="btnPrevious" class="btn">&lt;</div>
      <div id="btnNext" class="btn">&gt;</div>
    </div>
    <script>
      // 获取DOM元素
      var slider = document.getElementById("slider");
      var sliderWrapper = slider.getElementsByTagName("ul")[0];
      var sliderItems = sliderWrapper.getElementsByTagName("li");
      var btnPrevious = document.getElementById("btnPrevious");
      var btnNext = document.getElementById("btnNext");
      // 设置偏移量
      var sliderWidth = slider.offsetWidth;
      var sliderOffset = 0;
      // 左右滑动方法
      function slideLeft() {
        sliderOffset += sliderWidth;
        if (sliderOffset > sliderWidth * sliderItems.length) {
          sliderOffset = 0;
        }
        sliderWrapper.style.left = -sliderOffset + "px";
      }
      function slideRight() {
        sliderOffset -= sliderWidth;
        if (sliderOffset < 0) {
          sliderOffset = sliderWidth * (sliderItems.length - 1);
        }
        sliderWrapper.style.left = -sliderOffset + "px";
      }
      // 基于事件绑定实现轮播
      btnPrevious.addEventListener("click", slideRight);
      btnNext.addEventListener("click", slideLeft);
    </script>
  </body>
</html>

以上就是使用原生JS实现简单轮播图的完整攻略。通过以上三个步骤，相信你也可以轻松实现类似的轮播效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js实现简单轮播图效果 - Python技术站