JavaScript实现简单的图片切换

最新推荐文章于 2024-06-27 12:49:37 发布

雷加祥

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量829

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_37408390/article/details/106309548

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

  <img src="images/image01.jpg" id="fruit" width="200px" height="200px">
  <br>
  <button id="prev">上一张</button>
  <button id="next">下一站</button>

JavaScript

  var minIndex = 1,
      maxIndex = 4;
      currentIndex = minIndex;
      //下一张切换按钮
    document.querySelector('#next').addEventListener('click', function () {
      if (currentIndex == maxIndex) {
        currentIndex = minIndex;
      } else {
        currentIndex++;
      }
      document.querySelector('#fruit').setAttribute('src', `images/image0${currentIndex}.jpg`)
    });
    //上一张切换按钮
    document.querySelector('#prev').addEventListener('click', function () {
      if (currentIndex == minIndex) {
        currentIndex = maxIndex;
      } else {
        currentIndex--;
      }
      document.querySelector('#fruit').setAttribute('src', `images/image0${currentIndex}.jpg`)
    });