js轮播图制作-阿里云开发者社区

js轮播图制作
2024-08-23 27
版权
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： js轮播图制作
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>轮播图制作</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
 
      div {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
 
      #box {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
      }
 
 
      #img {
        width: 400%;
        height: 100vh;
        display: flex;
        justify-content: space-around;
      }
 
      #img img {
        width: 25%;
        height: 100vh;
      }
 
      #direction {
        width: 100%;
        height: 5vh;
        position: absolute;
        top: 45%;
        display: flex;
        justify-content: space-between;
      }
 
      #direction div {
        width: 5%;
        height: 5vh;
        text-align: center;
        border-radius: 10px;
        line-height: 5vh;
        font-size: 16px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        overflow: hidden;
      }
 
      #list {
        width: 100%;
        height: 5vh;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
      }
 
      #list span {
        display: block;
        width: 3%;
        height: 3vh;
        margin: 5px;
        border-radius: 100%;
        background-color: rgba(0, 0, 0, 1);
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="img">
        <img src="img/01.jpg">
        <img src="img/02.jpg">
        <img src="img/03.jpg" alt="">
        <img src="img/01.jpg" alt="">
      </div>
      <div id="direction">
        <div>⬅</div>
        <div>➡</div>
      </div>
      <div id="list">
        <span style="background-color: rgba(255, 0, 0, 1);"></span>
        <span></span>
        <span></span>
      </div>
    </div>
 
 
    <script>
      // 获取到所有图片的父级div
      let img = document.getElementById("img");
      // 获取到所有的图片
      let imgs = img.children;
      console.log(imgs);
      // 获取到图片的宽度
      let imgWidth = imgs[0].offsetWidth;
      console.log(imgWidth);
      // 获取到左右箭头按钮
      let but = document.getElementById("direction").children;
      console.log(but);
      // 获取到最大的div 包含图片，按钮，小圆点
      let box = document.getElementById("box");
      // 下标
      let k = 0;
      // 获取到所有的小圆点
      let list = document.getElementById("list").children;
      console.log(list);
      // 页面打开设定永久性定时器，两秒执行一次
      let int = setInterval(stats, 2000);
      // 自动轮播事件
      function stats() {
        // 下标+1
        k++;
        // 设置图片切换的过渡效果为 1 秒
        img.style.transition = "all 1s";
        // 根据当前图片序号 k，调整图片左边距，实现切换图片效果
        img.style.marginLeft = '-' + k * imgWidth + "px";
        // 判断是否已经切换到最后一张图片
        if (k == imgs.length - 1) {
          // 若是最后一张图片，则在延迟 1 秒后执行以下操作
          setTimeout(function() {
            // 重置图片序号 k 为 0
            k = 0;
            // 清除过渡效果
            img.style.transition = "";
            // 将图片左边距归零，回到第一张图片
            img.style.marginLeft = "0px";
          }, 1000);
          // 设置第一个小圆点为红色背景
          list[0].style.backgroundColor = "rgba(255,0,0,1)";
          // 设置最后一个小圆点为黑色背景
          list[list.length - 1].style.backgroundColor = "rgba(0,0,0,1)";
        } else {
          // 若不是最后一张图片，则设置前一张图片对应的小圆点为黑色背景
          list[k - 1].style.backgroundColor = "rgba(0,0,0,1)";
          // 设置当前图片对应的小圆点为红色背景
          list[k].style.backgroundColor = "rgba(255,0,0,1)";
        }
      }
      // 鼠标移入最大的div时清除定时器
      box.onmouseover = function() {
        clearInterval(int);
      }
      // 移出时设定定时器，开始轮播
      box.onmouseout = function() {
        int = setInterval(stats, 2000);
      }
      // 右箭头绑定点击下一张事件
      but[1].onclick = rightsta;
      //下一张事件
      function rightsta() {
        // 调用自动轮播事件
        stats();
        // 清除点击事件
        // 目的是为了防止短时间内多次点击导致出现bug
        but[1].onclick = "";
        // 在 1 秒后再次绑定点击事件
        // 因为过渡时间是 1 秒
        setTimeout(function() {
          but[1].onclick = rightsta;
        }, 1000);
      }
 
      but[0].onclick = lefts;
      // 上一张点击事件
      function lefts() {
        // 调用上一张轮播事件
        leftstats();
        // 上一张点击事件清除绑定
        but[0].onclick = "";
        // 1 秒后重新绑定
        setTimeout(function() {
          but[0].onclick = lefts;
        }, 1000);
      }
      // 上一张轮播事件
      function leftstats() {
        // 当到达第一张图片时
        if (k == 0) {
          // 让图片到达最后一张
          k = imgs.length - 1;
          // 过渡时间去除，保证用户看不到
          img.style.transition = "";
          // 移动到对应的位置
          img.style.marginLeft = `-${k*imgWidth}px`;
          // 小圆点的第一个变为黑色
          list[0].style.backgroundColor = "rgba(0,0,0,1)";
          // 小圆点的最后一个变为红色，表示当前为最后一张
          list[list.length - 1].style.backgroundColor = "rgba(255,0,0,1)";
        }
        // 设定一次性定时器，50毫秒后执行 k-- 也即是上一张
        setTimeout(function() {
          k--;
          // 加上过渡时间
          img.style.transition = "all 1s";
          // 移动
          img.style.marginLeft = '-' + k * imgWidth + "px";
          if (k < list.length - 1) { // 避免出现报错
            list[k + 1].style.backgroundColor = "rgba(0,0,0,1)";
            list[k].style.backgroundColor = "rgba(255,0,0,1)";
          }
        }, 50);
      }
    </script>
  </body>
</html>
js轮播图制作

热门文章

最新文章

相关课程

相关电子书

相关实验场景
