轮播图(还没实现无缝)

最新推荐文章于 2024-07-25 11:52:08 发布

neverGV

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量81

点赞数

分类专栏：小练习文章标签： html

本文链接：https://blog.csdn.net/neverGV/article/details/109297255

版权

小练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <div class="wrap" id="wrap">
        <img
          src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1311085666,1887597967&fm=26&gp=0.jpg"
        />
        <img
          src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1311085666,1887597967&fm=26&gp=0.jpg"
        />
        <img
          src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1311085666,1887597967&fm=26&gp=0.jpg"
        />
        <img
          src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1311085666,1887597967&fm=26&gp=0.jpg"
        />
        <img
          src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1311085666,1887597967&fm=26&gp=0.jpg"
        />
      </div>
      <button id="leftbtn" class="btn btn_l"><</button>
      <button id="rightbtn" class="btn btn_r">&gt;</button>
      <ul class="selectnav">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
      </ul>
    </div>
  </body>
  <script>
    var leftbtn = document.getElementById("leftbtn");
    var wrap = document.getElementById("wrap");
    var rightbtn = document.getElementById("rightbtn");
    var liitem = document.querySelectorAll(".item");
    var timer = null;
    let num = 0;
    init();
    function init()
    {
        for (let i = 0; i < liitem.length; i++) {
      if (i === num) {
        liitem[i].classList.add("active");
      }
    }
    }
    timer = setInterval(() => {
      moveright();
    }, 3000);
    function clearclass() {
      liitem.forEach((item, i) => {
        item.classList.remove("active");
      });
    }
    function continuemove() {
        timer = setInterval(() => {
          moveright();
        }, 3000);
    }
    function moveright() {
        console.log(num);
      if (num < 4) {
        num++;
      } else {
        num = 0;
      }
      clearclass();
      for (let i = 0; i < liitem.length; i++) {
        if (i === num) {
          liitem[i].classList.add("active");
        }
      }
      wrap.style.marginLeft = -num * 800 + "px";
    }

    rightbtn.addEventListener("click", function () {
      clearInterval(timer);
      moveright();
      continuemove();
    });
    function moveleft() {
      if (num > 0) {
        num--;
      } else {
        num = 4;
      }
      clearclass();
      for (let i = 0; i < liitem.length; i++) {
        if (i === num) {
          liitem[i].classList.add("active");
        }
      }
      wrap.style.marginLeft = -num * 800 + "px";
    }
    leftbtn.addEventListener("click", function () {
      clearInterval(timer);
        moveleft();
        continuemove();
    });
    
  </script>
</html>
<style>
  .box {
    width: 800px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  .wrap {
    width: 4000px;
    display: flex;
    height: 500px;
    transition: 2s all;
  }

  * {
    margin: 0;
    list-style: none;
    padding: 0;
  }
  .btn {
    position: absolute;
    width: 20px;
    height: 40px;
    background-color: paleturquoise;
    top: 50%;
  }
  .btn_l {
    left: 0px;
    margin-top: -20px;
  }
  .btn_r {
    right: 0px;
    margin-top: -20px;
  }
  body,
  html {
    width: 100%;
    height: 100%;
  }
  .wrap > img {
    width: 800px;
    height: 500px;
  }
  .selectnav {
    width: 160px;
    height: 20px;
    display: flex;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -80px;
  }
  .selectnav > li {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #fff;
    margin: 5px;
  }
  li.active {
    background-color: peru;
  }
</style>

neverGV

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图(还没实现无缝)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> &lt
复制链接

扫一扫

专栏目录