js 轮播图

最新推荐文章于 2024-05-18 06:08:21 发布

清晨投递

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量460

点赞数

分类专栏： javaScript 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_51244384/article/details/122562272

版权

javaScript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

分为以下步骤：

1、鼠标经过显示左右箭头，鼠标离开隐藏左右箭头。

2、循环遍历按钮，给按钮添加点击事件。设置高亮类名

3、给左右箭头添加点击事件，点击右箭头left增加，点击左箭头left减少。并添加节流阀。

4、添加计时器，重复右箭头操作。并在鼠标经过时停止定时器，鼠标离开时开启定时器

轮播图效果集合了前面学的大部分知识点，可以很好的练习。话不多说，上代码

一、html、css部分

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

<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>Document</title>
  <!-- 导入动画函数 -->
  <script src="./js/animate.js"></script>
  <!-- 导入js文件 -->
  <script src="./js/index.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    /* 大盒子 */
    .banner {
      margin: 0 auto;
      position: relative;
      width: 610px;
      height: 340px;
      background-color: blue;
      overflow: hidden;
    }

    /* ul */
    .ul {
      position: absolute;
      left: 0;
      top: 0;
      list-style: none;
      width: 500%;
    }

    .ul li {
      float: left;

    }

    .ul li img {
      width: 610px;
      height: 340px;
    }

    /* ol */
    .ol {
      list-style: none;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-70%);
    }

    .ol li {
      float: left;
      margin-left: 5px;
      width: 13px;
      height: 13px;
      background-color: #fff;
      border-radius: 50%;
      cursor: pointer;
      transition: all .3s;
    }

    /* 小圆圈选中状态 */
    .active {
      background-color: #000 !important;
    }

    /* 左右箭头 */
    .left-arrow,
    .right-arrow {
      display: none;
      position: absolute;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
      width: 35px;
      height: 30px;
      background-color: #fff;
      z-index: 2;
      top: 50%;
      transform: translateY(-50%);
      transition: all .2s;
    }

    .left-arrow:hover,
    .right-arrow:hover {
      font-size: 20px;
      opacity: .8;
      line-height: 40px;
      width: 45px;
      height: 40px;
    }

    .left-arrow {
      left: 0;
      border-radius: 0 50px 50px 0;
    }

    .right-arrow {
      right: 0;
      border-radius: 50px 0 0 50px;
    }
  </style>
</head>

<body>

  <div class="banner">
    <span class="left-arrow">←</span>
    <span class="right-arrow">→</span>
    <ul class="ul">
      <li><img src="./img/1.jpg" alt="1"></li>
      <li><img src="./img/2.jpg" alt="2"></li>
      <li><img src="./img/3.jpg" alt="3"></li>
      <li><img src="./img/4.jpg" alt="4"></li>
    </ul>
    <ol class="ol">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
</body>

</html>

二、js部分

// 页面加载完事件 load
window.addEventListener('load', function () {
  // 最大盒子
  var banner = document.querySelector('.banner')
  // 右箭头
  var left_arrow = document.querySelector('.left-arrow')
  // 左箭头
  var right_arrow = document.querySelector('.right-arrow')
  var ul = document.querySelector('.ul')
  // 计数器
  var sum = 0
  // 按钮索引 记录按钮当前高亮
  var state = 0
  // 节流阀 使动画执行完毕才能点击下一张
  var flag = true
  // 1、经过大盒子 右箭头左箭头显示隐藏
  banner.addEventListener('mouseenter', function () {
    left_arrow.style.display = 'block'
    right_arrow.style.display = 'block'
    // 鼠标经过关闭定时器
    clearInterval(timer)
    // 清空定时器
    timer = null
  })

  banner.addEventListener('mouseleave', function () {
    left_arrow.style.display = 'none'
    right_arrow.style.display = 'none'
    // 鼠标离开开启定时器
    timer = setInterval(function () {
      right_arrow.click() // 手动点击
    }, 2000)
  })

  // 2、获取按钮 排他思想 干掉其他人 留下我自己
  var ol = document.querySelector('.ol')
  ol.children[0].className = 'active'
  // 循环注册点击事件
  for (var i = 0; i < ol.children.length; i++) {
    // 给每个按钮设置index属性
    ol.children[i].setAttribute('index', i)
    ol.children[i].onclick = function () {
      // 干掉其他人
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = ''
      }
      // 留下我自己
      this.className = 'active'
      // 获取当前按钮的index属性
      var index = this.getAttribute('index')
      sum = index
      state = index
      animate(ul, -index * ul.children[0].offsetWidth)
    }
  }
  // 克隆第一张图片
  var img = ul.children[0].cloneNode(true)
  // 添加到最后
  ul.appendChild(img)

  // 3、点击右箭头 left值增加
  // 计数器 left值 = sum * img的大小
  right_arrow.addEventListener('click', function () {
    if (flag) {
      // 关闭节流阀
      flag = false
      // 如果计数器等于 4 清空计数器 清空按钮状态 left等于0
      if (sum == ul.children.length - 1) {
        sum = 0
        state = 0
        ul.style.left = 0
      }
      // 每点击一次sum、state加1 更新当前状态
      sum++
      state++
      // 动画
      animate(ul, -ul.children[0].offsetWidth * sum, function () {
        // 动画执行完毕开启节流阀
        flag = true
      })

      oltate()
    }
  })

  // 3、点击左箭头 left值减少
  // 计数器 left值 = sum * img的大小

  left_arrow.addEventListener('click', function () {
    if (sum == 0) {
      sum = 4
      state = 4
    }
    // 每点击一次sum、state减1 更新当前状态
    sum--
    state--
    // 动画
    animate(ul, -ul.children[0].offsetWidth * sum)

    oltate()
  })

  function oltate() {
    // 清空所有btn类名
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = ''
    }
    // 如果按钮到了最后一个 下一个切换到第一个，否则正常运行
    if (state == 4) {
      ol.children[0].className = 'active'
    } else {
      ol.children[state].className = 'active'
    }
  }

  // 4、自动轮播 相当于重复右箭头操作
  var timer = setInterval(function () {
    clearInterval(timer) // 关闭上一个定时器
    right_arrow.click() // 手动点击
  }, 2000)
})

三、animate动画函数部分

function animate(obj, target, callback) {
  /**
   * obj：对象
   * target：目标距离
   * callback：回调函数
   */
  clearInterval(obj.timer)
  obj.timer = setInterval(function () {
    var step = (target - obj.offsetLeft) / 10
    step = step < 0 ? Math.floor(step) : Math.ceil(step)
    obj.style.left = obj.offsetLeft + step + 'px'

    if (obj.offsetLeft == target) {
      clearInterval(obj.timer)
      // 判断是否传入了回调函数
      // if (callback) {
      //   callback();
      // }

      callback && callback()
    }
  }, 10)
}

四、效果

清晨投递

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 轮播图

话不多说，上代码一、html、css部分<!DOCTYPE html><html lang="zh-cn"><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".
复制链接

扫一扫