鼠标移入时切换背景图并循环回到首张图的实现问题

我来帮你搞定这个鼠标移入循环切换背景图的问题～你的代码现在的问题是：当切换到最后一张图的时候，.next(".grid_home_inside")找不到下一个元素，后续的类切换操作就失效了，自然没法回到第一张。

我们可以调整JS逻辑，先判断当前显示元素的下一个元素是否存在，如果不存在就直接取容器里的第一个.grid_home_inside元素，这样就能实现循环切换了。

修改后的完整代码 #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="grid_home">
    <div class="grid_home_inside displayed" style="background: url(https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG) no-repeat center center;background-size:cover;"></div>
    <div class="grid_home_inside" style="background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0A3u74LuIJ6OgDXWY4yWW_4F9bXs_VHTKfxdn-vhjWTlBnz-a) no-repeat center center;background-size:cover;"></div>
    <div class="grid_home_inside" style="background: url(http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2015/10/151027_BA_blue-sky.jpg.CROP.promo-xlarge2.jpg) no-repeat center center;background-size:cover;"></div>
  </div>
</section>

CSS

section .grid_home {
  width: 50vw;
  height: 50vh;
  position: relative;
}
.grid_home_inside {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  transition: opacity 0.3s ease; /* 加个过渡动画，切换更平滑 */
}
.grid_home_inside.displayed {
  opacity: 1;
}

JavaScript

$(".grid_home").mouseenter(function() {
  // 获取当前容器内正在显示的元素
  const currentDisplayed = $(this).find(".displayed");
  // 判断下一个元素是否存在，不存在则取第一个子元素
  const nextElement = currentDisplayed.next(".grid_home_inside").length 
    ? currentDisplayed.next(".grid_home_inside") 
    : $(this).find(".grid_home_inside:first");
  
  // 切换显示类
  currentDisplayed.removeClass("displayed");
  nextElement.addClass("displayed");
})

逻辑说明 #

1. 用$(this).find(".displayed")精准获取当前容器内的显示元素，避免页面有多个.grid_home时出错
2. 通过length判断下一个元素是否存在：存在则用下一个，不存在则回退到第一个元素
3. 最后完成类的切换，实现背景图的循环展示

另外给CSS加了过渡动画，让切换过程更流畅，提升交互体验～

内容的提问来源于stack exchange，提问作者mmdwc