jQuery实现图片渐入渐出切换展示效果

下面我就为你详细讲解一下jQuery实现图片渐入渐出切换展示效果的完整攻略。

一、前置知识

在学习本篇攻略之前，请先了解以下基本知识：

• jQuery基本语法；
• CSS过渡效果。

二、攻略步骤

1. HTML结构

首先，我们需要构建一个基本的HTML结构。这里以图片轮播为例，HTML结构如下：

<div class="slider">
  <img src="img1.jpg" alt="">
  <img src="img2.jpg" alt="">
  <img src="img3.jpg" alt="">
  <img src="img4.jpg" alt="">
</div>

其中，.slider是轮播图容器，.slider img是轮播图图片标签。

2. CSS样式

其次，我们需要为轮播图容器和图片添加一些基本的CSS样式。在这里，我们选择使用CSS过渡效果来实现图片的渐入渐出切换。CSS代码如下：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

其中，.slider的position属性设置为relative，并设置宽度和高度，同时将overflow属性设置为hidden，以便控制图片显示区域的大小。.slider img的position属性设置为absolute，并设置宽度和高度为100%，同时将opacity属性设置为0，用于控制图片的透明度。.slider img.active表示当前显示的图片，它的opacity属性设置为1，用于实现图片的渐入渐出效果。其中，transition属性控制图片的过渡效果，.5s表示过渡时间为0.5秒，ease-in-out表示缓动函数，即动画效果。

3. JavaScript代码

最后，我们需要使用jQuery完成图片的切换效果。首先，在页面加载完成后，将第一张图片设置为当前显示的图片：

$(document).ready(function() {
  $(".slider img:first-child").addClass("active");
});

接下来，设置图片轮播的定时器，每隔一定时间切换一张图片：

setInterval(function() {
  var active = $(".slider img.active");
  if (active.next().length) {
    active.next().addClass("active");
  } else {
    $(".slider img:first-child").addClass("active");
  }
  active.removeClass("active");
}, 5000);

其中，setInterval()方法用于设置定时器，第一个参数表示定时器的回调函数，第二个参数表示定时器的时间间隔。回调函数中，首先获取当前显示的图片，如果当前图片的后面还有图片，则将后面的图片设为当前显示的图片；否则，将第一张图片设为当前显示的图片。最后，将当前显示的图片的.active类删除，将下一张图片的.active类添加，实现图片的渐入渐出效果。

4. 示例演示

下面，我为你演示两个完整的示例。

示例一：基本图片轮播

<style>
.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}
</style>

<div class="slider">
  <img src="https://picsum.photos/id/100/900/400" alt="">
  <img src="https://picsum.photos/id/200/900/400" alt="">
  <img src="https://picsum.photos/id/300/900/400" alt="">
  <img src="https://picsum.photos/id/400/900/400" alt="">
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(document).ready(function() {
  $(".slider img:first-child").addClass("active");

  setInterval(function() {
    var active = $(".slider img.active");
    if (active.next().length) {
      active.next().addClass("active");
    } else {
      $(".slider img:first-child").addClass("active");
    }
    active.removeClass("active");
  }, 3000);
});
</script>

示例二：带下方小圆点导航的图片轮播

<style>
.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-nav span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.slider-nav span.active {
  background-color: #f00;
}
</style>

<div class="slider">
  <img src="https://picsum.photos/id/100/900/400" alt="">
  <img src="https://picsum.photos/id/200/900/400" alt="">
  <img src="https://picsum.photos/id/300/900/400" alt="">
  <img src="https://picsum.photos/id/400/900/400" alt="">
</div>

<div class="slider-nav">
  <span class="active"></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(document).ready(function() {
  $(".slider img:first-child").addClass("active");
  $(".slider-nav span:first-child").addClass("active");

  var count = $(".slider img").length;

  setInterval(function() {
    var active = $(".slider img.active");
    var activeNav = $(".slider-nav span.active");

    if (active.next().length) {
      active.next().addClass("active");
      activeNav.next().addClass("active");
    } else {
      $(".slider img:first-child").addClass("active");
      $(".slider-nav span:first-child").addClass("active");
    }
    active.removeClass("active");
    activeNav.removeClass("active");

    if ($(".slider-nav span.active").index() == count - 1) {
      $(".slider-nav span:first-child").addClass("active");
    }
  }, 3000);

  $(".slider-nav span").click(function() {
    $(".slider-nav span").removeClass("active");
    $(this).addClass("active");

    $(".slider img").removeClass("active");
    $(".slider img").eq($(this).index()).addClass("active");
  });
});
</script>

这两个示例展示了基本的图片轮播和带下方小圆点导航的图片轮播，你也可以根据自己的需求进行修改和扩展。