JavaScript练习（二）——轮播图

最新推荐文章于 2022-09-07 12:57:26 发布

Starry577

最新推荐文章于 2022-09-07 12:57:26 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

文章标签： js javascript html css

本文链接：https://blog.youkuaiyun.com/ttxwwdn/article/details/110162670

本文介绍了一种使用HTML、CSS和JavaScript实现轮播图的方法。通过编写简单的动画函数，能够平滑地切换不同图片，并利用导航点进行手动控制。文章详细展示了如何设置样式和编写逻辑代码来完成这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.主要代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #outer {
        position: relative;
        width: 520px;
        height: 400px;
        margin: 50px auto;
        padding: 10px 0;
        overflow: hidden;
        background-color: pink;
      }
      #outer #imgList {
        position: absolute;
      }
      #outer #imgList li {
        list-style: none;
        float: left;
      }
      #outer #imgList li img {
        width: 500px;
        height: 400px;
        padding-left: 10px;
      }
      #nav #navList {
        position: absolute;
        top: 370px;
        height: 30px;
        text-align: center;
      }
      #nav ul li {
        display: inline-block;
        list-style: none;
        margin: 5px 10px;
        width: 12px;
        height: 12px;
        cursor: pointer;
        background-color: #ffffff;
      }
      #nav ul li:hover {
        background-color: pink;
      }
    </style>
    <script src="../js/tools.js"></script>
    <script>
      window.onload = function () {
        var outer = document.getElementById("outer");
        var navList = document.getElementById("navList");
        //设置导航栏left值
        navList.style.left =
          (outer.offsetWidth - navList.offsetWidth) / 2 + "px";
        var imgList = document.getElementById("imgList");
        var imgArr = document.getElementsByTagName("img");
        //设置轮播栏宽度
        imgList.style.width = imgArr.length * 520 + "px";
        var li = navList.children;
        var i = 0;
        li[i].style.backgroundColor = "pink";
        for (var j = 0; j < li.length; j++) {
          li[j].num = j;
          li[j].onclick = function () {
            clearInterval(timer);
            this.style.backgroundColor = "pink";
            li[i].style.backgroundColor = "";
            i = this.num;
            //imgList.style.left = i * -510 + "px";
            move(imgList, "left", 20, -510 * i, function () {
              autoChange();
            });
          };
        }
        autoChange();
        var timer;
        function autoChange() {
          timer = setInterval(function () {
            //如果最后一张图片的索引为0，则把它的left值设为第一张图片的left值，这样就完成了过渡效果
            if (i == 0) {
              imgList.style.left = 0;
            }
            li[i].style.backgroundColor = "";
            i++;
            i = i % imgArr.length;
            move(imgList, "left", 100, -510 * i, function () {});
            //把第一张图片也放在最后一张图片，把最后一张图片的索引改为0
            if (i >= imgArr.length - 1) {
              i = 0;
            }
            li[i].style.backgroundColor = "pink";
          }, 1000);
        }
      };
    </script>
  </head>
  <body>
    <div id="outer">
      <ul id="imgList">
        <li><img src="../images/png1.jpg" alt="" /></li>
        <li><img src="../images/png2.jpg" alt="" /></li>
        <li><img src="../images/png3.jpg" alt="" /></li>
        <li><img src="../images/png4.jpg" alt="" /></li>
        <li><img src="../images/图片1.png" alt="" /></li>
        <li><img src="../images/png1.jpg" alt="" /></li>
      </ul>
      <div id="nav">
        <ul id="navList">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
</html>

2.tools.js

      //尝试创建一个可以执行简单动画的函数
            /*
              参数：
                  obj 要执行动画的对象
                  attr 要执行动画的样式
                  target 执行动画的目标位置
                  speed 速度
                  callback 回调函数，将会在动画执行完毕以后执行
          */
            function move(obj, attr, speed, target, callback) {
              clearInterval(obj.timer);
              //判断速度的正负值
              //如果从0-800移动，则speed为正
              //如果从800-0移动，则speed为负
              var current = parseInt(getStyle(obj, attr));
              if (current > target) {
                speed = -speed;
              }

              obj.timer = setInterval(function () {
                var oldValue = getStyle(obj, attr);
                var newValue = parseInt(oldValue) + speed;

                if (
                  (speed < 0 && newValue < target) ||
                  (speed > 0 && newValue > target)
                ) {
                  newValue = target;
                }
                obj.style[attr] = newValue + "px";
                if (newValue === target) {
                  clearInterval(obj.timer);
                  //动画执行完毕，调用回调函数
                  callback && callback();
                }
              }, 30);
            }
            function getStyle(obj, name) {
              if (window.getComputedStyle) {
                return getComputedStyle(obj, null)[name];
              } else {
                return obj.currentStyle[name];
              }
            }

在这里插入图片描述