原生js经典案例*轮播图

 直接来代码！

h5

<div class="banner" id="banner">
        <ul class="imgBox">
            <li class="active"><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
        </ul>
        <!-- 焦点 -->
        <ol class="pointBox"></ol>
        <!-- 左右切换 -->
        <div class="prev">&lt;</div>
        <div class="next">&gt;</div>
</div>

css样式

<style>
           /* 取消默认样式 */
        ul, ol, li {
          list-style: none;
        }
        
        .banner {
          width: 600px;
          height: 400px;
          border: 10px solid orangered;
          margin: 30px auto;
          position: relative;
        }
    
        .banner > ul {
          width: 100%;
          height: 100%;
          position: relative;
        }
        
        .banner > ul > li {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          /* 隐藏照片 */
          opacity: 0;
          transition: opacity .5s linear;
        }
        .banner > ul > li > img {
            width: 100%;
            height: 100%;
        }
        /* 显示照片 */
        .banner > ul > li.active {
          opacity: 1;
        }
        /* 设置焦点 */
        .banner > ol {
          width: 200px;
          height: 30px;
          background-color: rgba(0, 0, 0, .3);
          position: absolute;
          left: 30px;
          bottom: 30px;
          border-radius: 15px;
    
          display: flex;
          
          justify-content: space-evenly;
          align-items: center;
        }
    
        .banner > ol > li {
          width: 20px;
          height: 20px;
          background-color: #fff;
          border-radius: 50%;
          cursor: pointer;
        }
        
        .banner > ol > li.active {
          background-color: red;
        }
    
        .banner:hover > div {
          display: flex;
        }
        /* 左右切换 */
        .banner > div {
          width: 30px;
          height: 40px;
          background-color: rgba(0, 0, 0, .2);
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 20px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          display: none;
        }
    
        .banner > div:hover {
          background-color: rgba(0, 0, 0, .5);
        }
    
        .banner > div.prev {
          left: 0;
        }
    
        .banner > div.next {
          right: 0;
        }
      </style>

js部分，ES6类语法 面向对象思想来实现

class Banner{
   // 获取元素，
  constructor(select){
      this.ele=document.querySelector(select)
        // 获取图片盒子，获取焦点
      this.imgBox=this.ele.querySelector('.imgBox')
      this.pointBox=this.ele.querySelector('.pointBox')
        //为了计数用
      this.index=0
        // 为了定时器自动轮播用
      this.timer=0
        // 调用方法
      this.init()
  }

  init(){
      this.setPoint()
      this.autoPlay()
      this.overOut()
      this.bindEvent()
  }
    //  设置生成焦点，
  setPoint () {
        // 定义焦点数量，和图片数量相等
      const pointNum=this.imgBox.children.length
         // 循环焦点
      for (let i = 0; i < pointNum; i++) {
        // 生成焦点元素
          const li = document.createElement('li')
        // 添加类名，为了下面方便使用,添加自定义属性计数值
          li.classList.add('point')
          li.dataset.i=i
        // 默认第一个焦点添加active类名
          if(i===0) li.classList.add('active')
        // 插入焦点盒子
          this.pointBox.appendChild(li)
      }
      // 重新设置焦点宽度，为了美观
      this.pointBox.style.width = pointNum*30+'px'
  }
  // 切换一张，为了实现自动轮播，先搞定切换一张
  changeOne (type) {
    // 初始 imgBox pointBox 去除active样式
    this.imgBox.children[this.index].classList.remove('active')
    this.pointBox.children[this.index].classList.remove('active')
    // type参数为了判断向后一张 或向前一张 或点击一张
    switch (type) {
        case true:
            // 判断true 就是加一张
            this.index ++
            break;
        case false:
            // 判断false 就是上一张
            this.index--
            break;
        default:
            // 当用户点击point，就是该一张
            this.index = type

    }
    // 界限判定，到达最后一张要切到第一张，或倒着第一张切换到最后一张
    if(this.index >= this.imgBox.children.length) this.index = 0
    if(this.index < 0) this.index = this.imgBox.children.length - 1
    // 给这一张或这一个焦点添加active
    this.imgBox.children[this.index].classList.add('active')
    this.pointBox.children[this.index].classList.add('active')
  }
    // 自动轮播，定时器实现，可以改变轮播速度
  autoPlay () {
      this.timer = setInterval (() => this.changeOne(true),1500)
  }
    // 鼠标移入，暂停定时器，停止轮播，鼠标移出，开启自动轮播
  overOut () {
      this.ele.addEventListener('mouseover', () => clearInterval(this.timer) )
      this.ele.addEventListener('mouseout', () => this.autoPlay())
  }
    // 用户手动点击切换图片
  bindEvent () {
      this.ele.addEventListener('click',(e) => {
        // 简单兼容一下
        e = e || window.event
        // 获取事件目标 并考虑兼容
        const target = e.target ||e.srcElement
        // 判断点击谁
        // 点击上一张，false 就是index--
        if (target.className === 'prev') this.changeOne(false)
        // 点击下一张， true 就是index++
        if (target.className === 'next') this.changeOne(true)
        // 点击某一张， 传入该元素携带的自定义属性值
        if (target.className === 'point') this.changeOne(target.dataset.i - 0)
      })
  }
}
// 调用
const b=new Banner('#banner')