缩略图轮播仅显示4个li并实现点击滑动过渡效果的问题

你遇到的问题很常见——直接用jQuery的hide()和show()切换元素时，因为这两个方法会修改元素的display属性（从none到block或反之），而CSS过渡无法在display:none的元素上触发，所以你加的opacity过渡没生效。下面给你两种可行的实现方案，都是基于CSS过渡来做平滑效果：

方案一：淡入淡出过渡 #

这种方案通过切换元素的透明度和可见性来实现平滑过渡，同时保持元素在文档流中，确保过渡能正常触发。

第一步：修改CSS样式 #

.thumbnails-carousel li {
  /* 初始状态：透明且不可见 */
  opacity: 0;
  visibility: hidden;
  /* 添加过渡动画 */
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  /* 固定高度，避免切换时布局跳动 */
  height: 160px;
  margin-bottom: 8px; /* 根据你的实际布局调整间距 */
}

/* 激活状态：完全可见 */
.thumbnails-carousel li.active {
  opacity: 1;
  visibility: visible;
}

第二步：修改JavaScript逻辑 #

不再使用hide()和show()，而是通过添加/移除active类来控制显示状态：

$(document).ready(function () {
  var $lis = $(".thumbnails-carousel li");
  // 初始显示前4个缩略图
  $lis.slice(0, 4).addClass("active");
  
  var size_li = $lis.length;
  var x = 4, start = 0;

  $('#next').click(function () {
    if (start + x < size_li) {
      // 隐藏当前组
      $lis.slice(start, start + x).removeClass("active");
      start += x;
      // 显示下一组
      $lis.slice(start, start + x).addClass("active");
    }
  });

  $('#prev').click(function () {
    if (start - x >= 0) {
      // 隐藏当前组
      $lis.slice(start, start + x).removeClass("active");
      start -= x;
      // 显示上一组
      $lis.slice(start, start + x).addClass("active");
    }
  });
});

方案二：上下滑动过渡（更贴合箭头交互） #

如果想要和上下箭头更匹配的滑动效果，可以用CSS的transform来实现：

第一步：修改CSS样式 #

.thumbnails-carousel ul {
  /* 固定容器高度，刚好容纳4个缩略图 */
  height: 664px; /* 示例：160px*4 + 8px*3 = 664px，根据你的li高度和间距调整 */
  overflow: hidden;
}

.thumbnails-carousel li {
  /* 初始状态：向下移出容器且透明 */
  transform: translateY(100%);
  opacity: 0;
  /* 添加过渡动画 */
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  margin-bottom: 8px;
}

/* 激活状态：回到原位置且完全可见 */
.thumbnails-carousel li.active {
  transform: translateY(0);
  opacity: 1;
}

第二步：JavaScript逻辑 #

和方案一完全相同，不需要额外修改——还是通过切换active类来触发过渡效果。

关键说明 #

为什么原来的过渡不生效？因为display:none会让元素脱离文档流，CSS过渡需要元素在两个可见状态之间切换（比如opacity:0到opacity:1），而从display:none到display:block是瞬间完成的，没有中间过渡状态，所以你的opacity样式不会起作用。

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