关于javascript:js轮播图切换图片路径

3次阅读

共计 623 个字符，预计需要花费 2 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
        margin: 0 auto;
        width: 640px;
        height: 360px;
      }
      img {
        width: 640px;
        height: 360px;
        border: 2px solid #333;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./image/pic1.jpeg" alt="">
    </div>
    <script>
      // 获取图片元素
      var img = document.querySelector('img')
      // 设置最小图片索引值
      var minIndex = 1
      // 设置最大图片索引值
      var maxIndex = 3
      // 设置以后图片索引值
      var index = minIndex
      function next() {
        // 如果切换到最初一张图片时将图片索引值重置为第一张
        if (index === maxIndex) {index = minIndex}else {
          // 图片索引值失常 + 1 切换
          index++
        }
        // 通过设置图片的 src 属性实现切换图片，应用模板字符串拼接图片门路
        img.setAttribute('src',`./image/pic${index}.jpeg`)
      }
      // 设置定时器切换图片实现轮播
      setInterval(next, 1800)
    </script>
  </body>
</html>

正文完