jquery实现图片切换代码

下面我将提供一个完整的jquery实现图片切换的攻略。

步骤一：HTML结构

首先需要创建一个HTML结构，例如：

<div class="slideshow">
  <img src="img1.jpg" alt="Image 1" class="active">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
  <img src="img4.jpg" alt="Image 4">
</div>

这里我们创建了一个包含4张图片的图片轮播器，其中第一张图片默认为激活状态，其他图片默认为隐藏状态。

步骤二：CSS样式

接下来为轮播器设置CSS样式，例如：

.slideshow {
  position: relative;
  height: 400px;
}
.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.slideshow img.active {
  opacity: 1;
}

这里我们将轮播器容器设置为相对定位，每张图片设置为绝对定位，并通过opacity属性控制图片的显示和隐藏。我们同时为.active类设置了不透明度为1，确保当前激活的图片被显示出来。

步骤三：jQuery代码

最后编写jQuery代码来控制图片切换：

$(document).ready(function() {
  //自动播放
  setInterval(function() {
    //获取当前激活图片和下一张图片
    var activeImage = $('.slideshow img.active');
    var nextImage = activeImage.next();

    //如果当前激活图片是最后一张，则将下一张图片设置为第一张
    if (nextImage.length === 0) {
      nextImage = $('.slideshow img:first-child');
    }

    //将下一张图片设置为激活状态，并且将当前激活图片设置为隐藏状态
    activeImage.removeClass('active');
    nextImage.addClass('active');
  }, 3000); //每3秒钟自动切换一张图片

  //手动切换
  $('.slideshow').on('click', function() {
    //获取当前激活图片和下一张图片
    var activeImage = $('.slideshow img.active');
    var nextImage = activeImage.next();

    //如果当前激活图片是最后一张，则将下一张图片设置为第一张
    if (nextImage.length === 0) {
      nextImage = $('.slideshow img:first-child');
    }

    //将下一张图片设置为激活状态，并且将当前激活图片设置为隐藏状态
    activeImage.removeClass('active');
    nextImage.addClass('active');
  });
});

这段代码实现了两种切换方式：自动切换和手动点击切换。在自动切换中，我们使用setInterval函数每隔3秒钟自动切换一张图片。在手动切换中，我们使用jQuery的on事件绑定函数，当轮播器被点击时切换到下一张图片。

示例

下面提供示例展示这段代码的运行效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>jQuery图片切换</title>
    <style>
      .slideshow {
        position: relative;
        height: 400px;
      }
      .slideshow img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
      }
      .slideshow img.active {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="slideshow">
      <img src="https://picsum.photos/id/1015/600/400" alt="Image 1" class="active">
      <img src="https://picsum.photos/id/1016/600/400" alt="Image 2">
      <img src="https://picsum.photos/id/1018/600/400" alt="Image 3">
      <img src="https://picsum.photos/id/1021/600/400" alt="Image 4">
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        setInterval(function() {
          var activeImage = $('.slideshow img.active');
          var nextImage = activeImage.next();
          if (nextImage.length === 0) {
            nextImage = $('.slideshow img:first-child');
          }
          activeImage.removeClass('active');
          nextImage.addClass('active');
        }, 3000);
        $('.slideshow').on('click', function() {
          var activeImage = $('.slideshow img.active');
          var nextImage = activeImage.next();
          if (nextImage.length === 0) {
            nextImage = $('.slideshow img:first-child');
          }
          activeImage.removeClass('active');
          nextImage.addClass('active');
        });
      });
    </script>
  </body>
</html>

上述示例展示了一张集成了jQuery实现图片切换功能的轮播图。当页面加载完成后，图片轮播器默认会自动切换图片，并且可以通过手动方式点击该轮播图来进行切换（默认切换时间为3秒）。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现图片切换代码 - Python技术站

jquery实现图片切换代码

步骤一：HTML结构

步骤二：CSS样式

步骤三：jQuery代码

示例

相关文章