操作DOM实现点击按钮图片切换效果的小练习

最新推荐文章于 2023-11-16 18:50:49 发布

快去敲代码.

最新推荐文章于 2023-11-16 18:50:49 发布

阅读量277

点赞数 2

分类专栏： js学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_51200810/article/details/127334379

版权

js学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 <style>
      .wrapper {
        margin: 100px auto;
        width: 400px;
        height: 430px;
      }
      .imgwrapper {
        width: 400px;
        height: 200px;
      }
      .imgwrapper img {
        width: 100%;
        height: 100%;
      }
      .btnwrapper {
        text-align: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <p>总共有n张图片，这是第i张图片</p>
      <div class="imgwrapper">
        <img src="./images/1.JPG" alt="找不到对应图片" />
      </div>
      <div class="btnwrapper">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
      </div>
    </div>
    <script>
      // 点击按钮，切换图片
      var prev = document.getElementById('prev')
      var next = document.getElementById('next')
      var img = document.getElementsByTagName('img')[0]
      // 获取文字
      var ptext = document.querySelector('p')

      // 创建数组保存图片url
      var arr = [
        './images/1.JPG',
        './images/2.JPG',
        './images/3.JPG',
        './images/4.JPG',
      ]
      let current = 0
      ptext.textContent = `总共有${arr.length}张图片,这是第${current + 1}张图片`
      prev.onclick = function () {
        current--
        if (current < 0) {
          current = arr.length - 1
        }
        img.src = arr[current]
        ptext.textContent = `总共有${arr.length}张图片,这是第${
          current + 1
        }张图片`
      }

      next.onclick = function () {
        current++
        if (current > arr.length - 1) {
          current = 0
        }
        img.src = arr[current]
        ptext.textContent = `总共有${arr.length}张图片,这是第${
          current + 1
        }张图片`
      }
    </script>
  </body>