JS实现网页轮播图

zjLOVEcyj

已于 2022-04-23 11:07:34 修改

阅读量701

点赞数 1

分类专栏： JS网页交互文章标签： javascript

于 2022-04-22 16:24:52 首次发布

本文链接：https://blog.csdn.net/cyj5201314/article/details/124348950

版权

JS网页交互专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>轮播图</title>
  <style>
    body,
    ul,
    ol {
      margin: 0;
      padding: 0;
    }

    a {
      position: absolute;
      text-decoration: none;
      font-size: 30px;
      z-index: 2;
      visibility: hidden;
    }

    a:nth-child(1) {
      top: 76px;
      left: 0px;
    }

    a:nth-child(2) {
      top: 76px;
      right: 0px;
    }

    ul,
    ol {
      list-style: none;
    }

    .focus {
      position: relative;
      width: 300px;
      height: 200px;
      overflow: hidden;
    }

    ul {
      position: absolute;
      width: 400%;
    }

    ul li {
      float: left;
    }

    ul li:nth-child(1) {
      width: 300px;
      height: 200px;
      background-color: pink;
    }

    ul li:nth-child(2) {
      width: 300px;
      height: 200px;
      background-color: skyblue;
    }

    ul li:nth-child(3) {
      width: 300px;
      height: 200px;
      background-color: purple;
    }

    ul li:nth-child(4) {
      width: 300px;
      height: 200px;
      background-color: pink;
    }

    ol {
      position: absolute;
      bottom: 10px;
      left: 104px;
    }

    ol li {
      float: left;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      margin-left: 5px;
      box-sizing: border-box;
    }

    .current {
      background-color: transparent;
      border: 2px solid #fff;
    }
  </style>
</head>

<body>
  <div class="focus">
    <a href="">&lt</a>
    <a href="">&gt</a>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ol>
      <li class="current"></li>
      <li></li>
      <li></li>
    </ol>
  </div>

  <script>
    // 封装轮播动画函数
    function animate(dom, target, callback) {
      if (dom.timer) clearInterval(dom.timer)
      dom.timer = setInterval(() => {
        if (dom.offsetLeft == target) {
          clearInterval(dom.timer)
          dom.timer = null
          callback && callback()
          return
        }
        let thisMoveDistance = (target - dom.offsetLeft) / 10
        let actualMove = thisMoveDistance > 0 ? Math.ceil(thisMoveDistance) : Math.floor(thisMoveDistance)
        dom.style.left = dom.offsetLeft + actualMove + 'px'
      }, 15)
    }

    let current_index = 0  //标记当前轮播的索引

    // 切换小圆点样式的函数
    function changeCircle(index) {
      for (let i = 0; i < ol.children.length; i++) {
        ol.children[i].className = ''
      }
      ol.children[index].className = 'current'
    }

    // 点击小圆点实现切换轮播页面
    let ul = document.querySelector('ul')
    let ol = document.querySelector('ol')
    // 给每个小圆点绑定index属性标记其代表那个轮播页面
    for (let i = 0; i < ol.children.length; i++) {
      ol.children[i].setAttribute('index', i)
    }
    ol.addEventListener('click', (e) => {
      if (e.target.tagName === 'LI') {
        let index = e.target.getAttribute('index')
        let target = -parseInt(index) * ul.children[0].offsetWidth
        animate(ul, target)
        current_index = parseInt(index)
        changeCircle(current_index)
      }
    })

    // 实现鼠标移入显示左右切换按钮，移出隐藏
    let left = document.querySelectorAll('a')[0]
    let right = document.querySelectorAll('a')[1]
    let focus = document.querySelector('.focus')
    focus.addEventListener('mouseenter', () => {
      left.style.visibility = 'visible'
      right.style.visibility = 'visible'
      // 鼠标移入时终止自动轮播
      clearInterval(timer)
    })
    focus.addEventListener('mouseleave', () => {
      left.style.visibility = 'hidden'
      right.style.visibility = 'hidden'
      // 鼠标移出时继续自动轮播
      timer = setInterval(() => {
        right.click()
      }, 2000)
    })

    // 实现向右切换按钮
    let finished = true
    right.addEventListener('click', (e) => {
      e.preventDefault()
      if (finished) {
        finished = false
        if (current_index === ul.children.length - 2) {
          animate(ul, ul.offsetLeft - ul.children[0].offsetWidth, () => {
            ul.style.left = 0 + 'px'
            current_index = 0
            changeCircle(current_index)
            finished = true
          })
        } else {
          let target = ul.offsetLeft - ul.children[0].offsetWidth
          animate(ul, target, () => {
            finished = true
          })
          current_index += 1
          changeCircle(current_index)
        }
      }
    })

    // 实现向左切换按钮
    left.addEventListener('click', (e) => {
      e.preventDefault()
      if (finished) {
        finished = false
        if (current_index === 0) {
          ul.style.left = - (ul.children.length - 1) * ul.children[0].offsetWidth + 'px'
          animate(ul, ul.offsetLeft + ul.children[0].offsetWidth, () => {
            finished = true
          })
          current_index = ul.children.length - 2
          changeCircle(current_index)
        } else {
          let target = ul.offsetLeft + ul.children[0].offsetWidth
          animate(ul, target, () => {
            finished = true
          })
          current_index -= 1
          changeCircle(current_index)
        }
      }
    })

    // 实现自动轮播
    let timer = setInterval(() => {
      right.click()
    }, 2000)
  </script>
</body>

</html>