网页端轮播图详细注解

奔跑DT向日葵ら

已于 2022-10-28 00:59:05 修改

阅读量255

点赞数

分类专栏： JS 文章标签：前端 javascript

于 2022-10-17 23:07:16 首次发布

本文链接：https://blog.csdn.net/qq_41927979/article/details/127379251

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML代码

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页轮播图</title>
  <script src="js/animate.js"></script>
  <script src="js/slideshow.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .focus {
      position: relative;
      overflow: hidden;
      width: 721px;
      height: 455px;
      margin: 100px auto;
    }

    .focus ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 600%;
    }

    .focus ul li {
      float: left;
    }

    .arrow-l,
    .arrow-r {
      display: none;
      position: absolute;
      top: 50%;
      z-index: 2;
      width: 24px;
      height: 40px;
      margin-top: -20px;
      background-color: rgba(0, 0, 0, .3);
      text-align: center;
      line-height: 40px;
      font-size: 18px;
      color: #fff;
    }

    .arrow-r {
      right: 0;
    }

    .circle {
      position: absolute;
      bottom: 10px;
      left: 50px;
    }

    .circle li {
      float: left;
      width: 12px;
      height: 12px;
      margin: 0 3px;
      border: 2px solid rgba(255, 255, 255, .5);
      border-radius: 50%;
      cursor: pointer;
    }

    .current {
      background-color: #fff;
    }
  </style>
</head>

<body>
  <div class="focus fl">
    <!-- 左侧按钮 -->
    <a href="javascript:;" class="arrow-l">&lt;</a>
    <!-- 右侧按钮 -->
    <a href="javascript:;" class="arrow-r">&gt;</a>
    <!-- 轮播图滚动区域 -->
    <ul>
      <li>
        <a href="#">
          <img src="./upload/focus.png" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./upload/focus1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./upload/focus2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./upload/focus3.jpg" alt="">
        </a>
      </li>
    </ul>
    <!-- 小圆圈 -->
    <ol class="circle">
    </ol>
  </div>
</body>

</html>

注意：.focus里面的宽高即轮播图图片的宽高
animate.js代码

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

slideshow.js代码

window.addEventListener('load', function () {
  // 左侧轮播图按钮
  let arrow_l = document.querySelector('.arrow-l')
  // 右侧轮播图按钮
  let arrow_r = document.querySelector('.arrow-r')
  // 整个轮播图窗口
  let focus = document.querySelector('.focus')
  // 获取图片的宽度，即轮播图视窗宽度
  let focusWidth = focus.offsetWidth
  // 鼠标经过和离开时，显示和隐藏左右切换按钮
  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block'
    arrow_r.style.display = 'block'
    // 鼠标放在图上停止自动播放
    clearInterval(timer)
    // 清除定时器变量
    timer = null
  })
  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none'
    arrow_r.style.display = 'none'
    // 鼠标移开自动播放轮播图
    timer = setInterval(() => {
      arrow_r.click()
    }, 3000);
  })
  // 动态生成轮播图的小圆圈
  let ul = focus.querySelector('ul')
  let ol = focus.querySelector('.circle')
  for (let i = 0; i < ul.children.length; i++) {
    // 创建一个li
    let li = document.createElement('li')
    // 给li设置一个自定义属性，来记录当前小圆圈的索引号
    li.setAttribute('index', i)
    // 把li插入到ol中
    ol.appendChild(li)
    // 给li绑定点击事件，排他思想（干掉所有人，留下我自己）
    li.addEventListener('click', function () {
      // 清除所有li的current（干掉所有人）
      for (let i = 0; i < ol.children.length; i++) {
        ol.children[i].className = ''
      }
      // 当前li设置为current（留下我自己）
      this.className = 'current'
      // 点击小圆圈移动图片
      // 实际移动的是ul
      // ul的移动距离：小圆圈的索引号 * 图片的宽度，取负值
      // 1. 获取当前点击的li的索引号
      let index = this.getAttribute('index')
      // 当点击了某个li时，需要同步更新num和circle的值
      num = circle = index
      // 2. 获取图片的宽度
      // let focusWidth = focus.offsetWidth
      animate(ul, -index * focusWidth)
    })
  }
  // 把ol中的第一个li设置为选中状态
  ol.children[0].className = 'current'
  // 克隆ul里面的第一张图片放在最后来做滚动的无缝衔接（注意这个必须要写在生成小圆圈的下面，否则就会多生成一个小圆圈）
  let first = ul.children[0].cloneNode(true)
  ul.appendChild(first)
  // 点击右侧按钮，图片滚动一张
  let num = 0 // 记录点击按钮的次数
  let circle = 0  // 控制小圆圈的选中状态
  let flag = true   // 节流阀（作用是：避免用户点击轮播图左右切换按钮过快，导致的图片滚动过快问题。加上后，可以让每次点击都能让图片滚动显示完，再滚动到下一张）
  arrow_r.addEventListener('click', function () {
    if (flag) {
      flag = false  // 关闭节流阀
      if (num == ul.children.length - 1) {
        ul.style.left = 0
        num = 0
      }
      num++
      animate(ul, -num * focusWidth, function () {
        flag = true   //等图片滚动完毕后再打开节流阀
      })
      circle++
      // 如果滚动到克隆的那张图片时，复原circle
      // if (circle == ol.children.length) {
      //   circle = 0
      // }
      circle = circle == ol.children.length ? 0 : circle
      // 点击右侧按钮，小圆圈也要发生变化
      circleChange()
    }

  })
  // 点击左侧按钮，图片滚动一张
  arrow_l.addEventListener('click', function () {
    if (flag) {
      flag = false
      if (num == 0) {
        num = ul.children.length - 1
        ul.style.left = -num * focusWidth + 'px'
      }
      num--
      animate(ul, -num * focusWidth, function () {
        flag = true
      })
      circle--
      // 如果处于第一张图片，则需要将circle改为最后一个小圆圈
      // if (circle < 0) {
      //   circle = ol.children.length - 1
      // }
      circle = circle < 0 ? ol.children.length - 1 : circle
      // 点击右侧按钮，小圆圈也要发生变化
      circleChange()
    }
  })
  function circleChange() {
    // 清除所有小圆圈的current
    for (let i = 0; i < ol.children.length; i++) {
      ol.children[i].className = ''
    }
    // 添加当前小圆圈的选中状态
    ol.children[circle].className = 'current'
  }
  // 自动播放轮播图
  let timer = setInterval(() => {
    arrow_r.click()
  }, 3000);
})