笔记：轮播图

最新推荐文章于 2024-06-14 11:21:46 发布

北极之光_

最新推荐文章于 2024-06-14 11:21:46 发布

阅读量87

点赞数 2

文章标签：笔记前端 javascript

本文链接：https://blog.csdn.net/weixin_42596287/article/details/136816223

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <style>
    * { margin: 0;padding: 0; }
    .swiper-wrap {
      width: 600px;
      height: 200px;
      position: relative;
    }
    .img-wrap {
      width: 100%;
      height: 100%;
    }
    
    .img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: all 1s;
    }
    .img.active {
      opacity: 1;
    }

    ul li { list-style: none; }
    .dot-wrap {
      display: flex;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
    }
    .dot-wrap .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: blue;
      opacity: 0.4;
    }
    .dot-wrap .dot:not(:first-child){
      margin-left: 10px;
    }
    .dot.active {
      opacity: 1;
    }
    .dot:hover {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="swiper-wrap">
    <div class="img-wrap">
      <img class="img active" src="./images/swiper1.jpg" />
      <img class="img" src="./images/swiper2.jpg" />
      <img class="img" src="./images/swiper3.jpg" />
    </div>

    <ul class="dot-wrap">
      <li class="dot active" num="0"></li>
      <li class="dot" num="1"></li>
      <li class="dot" num="2"></li>
    </ul>
    <button onclick="leftBtn()">上一张</button>
    <button onclick="rightBtn()">下一张</button>
  </div>
  <script>
    let img = document.getElementsByClassName('img');
    let dot = document.getElementsByClassName('dot');
    let imgWrap = document.querySelector('.img-wrap');
    let index = 0;  //下标值
    let timer = null;
    // 开启轮播
    // timer = setInterval(lunbo, 3000);

    // 点击圆点
    for(let i=0; i<dot.length; i++){
      dot[i].addEventListener('click',function(){
        let dot_index = this.getAttribute('num');
        index = dot_index;
        move();
      })
    }

    function move(){
      // 清除class
      for(let i=0; i<img.length; i++){
        img[i].className = 'img';
        dot[i].className = 'dot';
      }
      img[index].className = 'img active';
      dot[index].className = 'dot active';
    }

    // 轮播图片
    function lunbo(){
      index++;
      if(index >= img.length){
        index = 0;
      }
      move();
    }

    // 点击右边的按钮
    function rightBtn(){
      lunbo();
    }

    // 点击左边的按钮
    function leftBtn(){
      index--;
      if(index < 0){
        index = img.length-1;
      }
      move();
    }

    // 鼠标移入
    // imgWrap.onmouseover = function(){
    //   clearInterval(timer);
    // }

    // // 鼠标移出
    // imgWrap.onmouseleave = function(){
    //   timer = setInterval(lunbo, 3000);
    // }
  </script>
</body>
</html>