切换轮播实现(看这个就够了)-一一网

一、轮播图需求

点击箭头切换图片
点击小圆点切换图片
小圆点随着图片的切换而切换
自动切换图片的功能

二、需要做的工作

1、根据需求搭建出结构和修饰出样式，代码如下：

结构：

<div class="wrap">
      <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
      </ul>
      <ul class="pointList">
        <li class="point" data-index="0"></li>
        <li class="point" data-index="1"></li>
        <li class="point" data-index="2"></li>
        <li class="point" data-index="3"></li>
        <li class="point" data-index="4"></li>
      </ul>
      <button type="button" class="btn" id="goPre">
        <i class="iconfont icon-lunbojiantouzuo1"></i>
      </button>
      <button type="button" class="btn" id="goNext">
        <i class="iconfont icon-lunbojiantouyou1"></i>
      </button>
    </div>
复制代码

样式：

    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_2635369_tswixkaawm.css"
    />
<style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrap {
        width: 800px;
        height: 500px;
        position: relative;
        margin: 0 auto;
      }
      .list {
        width: 800px;
        height: 500px;
        list-style: none;
        position: relative;
      }
      .item {
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        /* 平时透明度设为零 */
        transition: all 0.5s;
        /* 淡入淡出效果设置的方法：步骤一 */
        /* 想要设置过渡效果必须要变化过后前后有不一样的属性值变化，图片切换不算是属性变化 */
      }
      .item:nth-child(1) {
        background: url(./imgs/1.jpg);
      }
      .item:nth-child(2) {
        background: url(./imgs/2.jpg);
      }
      .item:nth-child(3) {
        background: url(./imgs/3.jpg);
      }
      .item:nth-child(4) {
        background: url(./imgs/4.jpg);
      }
      .item:nth-child(5) {
        background: url(./imgs/5.jpg);
      }
      .item.active {
        opacity: 1;
        z-index: 10;
        /* 淡入淡出效果设置的方法：步骤二 */
      }
      .btn {
        width: 40px;
        height: 80px;
        border: none;
        cursor: pointer;
        position: absolute;
        background: none;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
      }
      #goPre {
        left: 0;
      }
      #goNext {
        right: 0;
      }
      .btn:hover {
        background-color: #6666;
      }
      .btn .iconfont {
        font-size: 30px;
      }
      .btn:hover .iconfont {
        color: #fff;
      }
      .pointList {
        list-style: none;
        position: absolute;
        bottom: 20px;
        right: 30px;
        z-index: 20;
      }
      .point {
        width: 8px;
        height: 8px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.4);
        border-color: hsla(0, 0%, 100%, 0.3);
        float: left;
        margin: 4px;
        cursor: pointer;
      }
      .point.active {
        background: hsla(0, 0%, 100%, 0.4);
        border-color: rgba(0, 0, 0, 0.4);
      }
    </style>
复制代码

轮播图的核心行为：

由于代码中已经给出每一个方法的详细解释，这里就不在为每一个需求的方法做出解释，直接上代码，如下所示：

<script>
      var items = document.getElementsByClassName('item') //所有图片
      var points = document.getElementsByClassName('point') //所有小圆点
      var goPreBtn = document.getElementById('goPre') //左切换按钮
      var goNextBtn = document.getElementById('goNext') //右切换按钮

      var time = 0 //定时器图片实现自动跳转参数
      var index = 0 //这个表示让第几张图片展示出来。
      items[index].className = 'item active' //开始的时候让第一张图片展示
      points[index].className = 'point active' //开始的时候小圆点在第一上

      // 下面这个函数是实现清除图片标签上和小圆点上的active类名，为的是只有一个图片和小圆点
      // 处于选中状态
      var clearActive = function() {
        for (var i = 0; i < items.length; i++) {
          items[i].className = 'item'
          points[i].className = 'point'
        }
      }
      // 这个是封装的点击切换处理函数
      var goIndex = function() {
        clearActive()
        items[index].className = 'item active'
        points[index].className = 'point active'
      }
      // 点击右边按钮，图片向前切换，小圆点页跟着向前，这个函数主要是做判断得出index的值，
      // goIndex函数做具体的操作
      var goNext = function() {
        if (index >= 4) {
          index = 0
        } else {
          index++
        }
        goIndex()
      }
      // 点击左边按钮，图片向后切换，小圆点页跟着向后，这个函数主要是做判断，得出index的值，
      // goIndex函数做具体的操作
      var goPre = function() {
        if (index <= 0) {
          index = 4
        } else {
          index--
        }
        goIndex()
      }
      // 为右按钮绑定向前事件，上方已经定义好了函数 goNext函数
      goNextBtn.addEventListener('click', function() {
        time = 0 //这是为了当你点击左右按钮的时候定时器重新开始；
        goNext()
      })
      // 为左按钮绑定向后事件，上方已经定义好了函数 goPre函数
      goPreBtn.addEventListener('click', function() {
        time = 0 //这是为了当你点击左右按钮的时候定时器重新开始；
        goPre()
      })

      // 下面是实现图片自动切换效果的有关js代码
      for (var i = 0; i < points.length; i++) {
        points[i].addEventListener('click', function() {
          var pointIndex = this.getAttribute('data-index')
          index = pointIndex
          time = 0 //这是为了当你点击下方小点点的时候定时器重新开始；
          goIndex()
        })
      }
      //   定时器的方法实现自动切换轮播的效果
      var timar = setInterval(() => {
        time++
        if (time == 50) {
          goNext()
          time = 0
        }
      }, 100)
    </script>
复制代码