实现幻灯片交互：初始显示下一张10%，hover时显示30%（附现有代码）

嘿，我帮你搞定这个幻灯片悬停预览的交互效果！结合你已经在用的Cycle插件，咱们可以通过CSS+少量JS实现你要的需求——初始状态下仅显示下一张幻灯片的10%区域，鼠标悬停时扩展到30%，和你想要的效果一致。

核心思路 #

咱们的实现逻辑很清晰：

• 利用Cycle的carousel布局，设置初始显示1.1个幻灯片（当前100% + 下一张10%）
• 用CSS的overflow: hidden隐藏容器外的内容，配合过渡动画实现平滑的宽度变化
• 通过容器的悬停事件触发下一张幻灯片的宽度扩展
• 用插件回调处理幻灯片切换后的样式重置，避免边缘问题

完整代码实现 #

1. 补全HTML结构（基于你已有的代码） #

<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
<h2>Show the left and the right slides</h2>
<div class="slideshow-container">
  <div class="slideshow responsive" 
       data-cycle-fx="carousel" 
       data-cycle-timeout="0" <!-- 关闭自动轮播，按需调整为你需要的数值 -->
       data-cycle-carousel-visible="1.1" <!-- 初始显示当前+10%的下一张 -->
       data-cycle-carousel-fluid="true"
       data-cycle-next=".slideshow-container" <!-- 点击容器切换幻灯片 -->
       data-cycle-prev=".prev-btn">
    <!-- 替换成你的幻灯片内容 -->
    <div class="slide">Slide 1 Content</div>
    <div class="slide">Slide 2 Content</div>
    <div class="slide">Slide 3 Content</div>
    <div class="slide">Slide 4 Content</div>
  </div>
  <button class="prev-btn">Previous</button>
</div>

2. 关键CSS样式 #

.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden; /* 隐藏超出容器的幻灯片部分 */
  cursor: pointer;
}

.slideshow .slide {
  width: 100%; /* 当前幻灯片占满容器宽度 */
  transition: width 0.3s ease; /* 平滑过渡动画，时长可调整 */
}

/* 初始状态：下一张幻灯片仅显示10% */
.slideshow .cycle-slide-next {
  width: 10% !important;
}

/* 悬停时：下一张幻灯片扩展到30% */
.slideshow-container:hover .slideshow .cycle-slide-next {
  width: 30% !important;
}

/* 可选：给幻灯片添加基础样式，方便区分 */
.slide {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
}
.slide:nth-child(1) { background-color: #2c3e50; }
.slide:nth-child(2) { background-color: #3498db; }
.slide:nth-child(3) { background-color: #e74c3c; }
.slide:nth-child(4) { background-color: #2ecc71; }

3. 辅助JS（处理边缘情况） #

如果需要确保幻灯片切换后样式正确重置，可以添加这个回调：

$('.slideshow').on('cycle-after', function(e, opts) {
  // 重置所有幻灯片宽度为默认值
  $('.slide').css('width', '100%');
  // 给新的下一张幻灯片设置初始10%宽度
  $(opts.nextSlide).css('width', '10%');
});

关键注意点 #

• 我把data-cycle-timeout改成了0（关闭自动轮播），你可以根据需求改回1000或其他数值
• data-cycle-carousel-visible="1.1"是Cycle的核心配置，用来控制初始显示的幻灯片数量比例
• 用!important覆盖Cycle生成的内联样式，确保我们的宽度设置生效
• CSS过渡transition: width 0.3s ease保证悬停时的动画平滑自然，不会生硬跳转

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