如何用jQuery控制webkit frame？点击触发式CSS滑块实现疑问

我来帮你搞定这个问题！要实现点击前后按钮才触发滑动的非自动滑块，核心是让CSS关键帧动画默认“待命”，再通过jQuery精准控制动画的启停和slide切换，具体方案如下：

第一步：调整CSS，让动画默认不自动播放 #

首先修改你的CSS，把原本自动播放的动画改成默认暂停状态，或者用类来控制动画的触发（后者更灵活）：

/* 保留你的关键帧定义 */
@-webkit-keyframes anim_slides {
  0% { opacity: 0; }
  6% { opacity: 1; }
  24% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

/* 滑块容器基础样式 */
.slider {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

/* 每个slide的默认状态：隐藏，动画定义但暂停 */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 定义动画参数，默认暂停 */
  -webkit-animation: anim_slides 3s ease-in-out forwards;
  -webkit-animation-play-state: paused;
}

/* 可选：用类来标记当前激活的slide */
.slide.active {
  -webkit-animation-play-state: running;
}

这里我把动画时长改成了3秒（你可以按需调整），并加上forwards让动画结束后保持最后一帧状态，方便后续切换。

第二步：用jQuery控制点击触发与slide切换 #

接下来写jQuery逻辑，监听前后按钮的点击，处理slide的切换和动画启停：

$(document).ready(function() {
  // 获取所有slide元素，初始化当前索引
  const $slides = $('.slide');
  let currentSlideIndex = 0;
  const totalSlides = $slides.length;

  // 向前按钮点击事件
  $('.btn-next').click(function() {
    // 暂停当前slide的动画，重置为初始隐藏状态
    $slides.eq(currentSlideIndex)
      .css('-webkit-animation-play-state', 'paused')
      .removeClass('active')
      .css('opacity', 0);
    
    // 计算下一个slide的索引（循环到第一个）
    currentSlideIndex = (currentSlideIndex + 1) % totalSlides;
    
    // 触发下一个slide的动画：先强制重绘避免浏览器不响应，再启动动画
    const $targetSlide = $slides.eq(currentSlideIndex);
    $targetSlide.addClass('active');
    // 强制重绘（关键技巧，解决动画不触发的问题）
    $targetSlide.get(0).offsetWidth;
    $targetSlide.css('-webkit-animation-play-state', 'running');
  });

  // 向后按钮点击事件
  $('.btn-prev').click(function() {
    $slides.eq(currentSlideIndex)
      .css('-webkit-animation-play-state', 'paused')
      .removeClass('active')
      .css('opacity', 0);
    
    // 计算上一个slide的索引（循环到最后一个）
    currentSlideIndex = (currentSlideIndex - 1 + totalSlides) % totalSlides;
    
    const $targetSlide = $slides.eq(currentSlideIndex);
    $targetSlide.addClass('active');
    $targetSlide.get(0).offsetWidth;
    $targetSlide.css('-webkit-animation-play-state', 'running');
  });

  // 初始化：让第一个slide显示并播放动画
  $slides.eq(currentSlideIndex)
    .addClass('active')
    .css('-webkit-animation-play-state', 'running');
});

关键知识点说明 #

• animation-play-state：这是控制CSS动画启停的核心属性，paused暂停，running播放，完美匹配点击触发的需求。
• 强制重绘：$targetSlide.get(0).offsetWidth这行代码是个小技巧，能强制浏览器重新计算元素布局，避免因为快速切换导致动画不触发的问题。
• 循环逻辑：用取模运算%实现slide的循环切换，点击最后一个slide的向前按钮会回到第一个，第一个的向后按钮会跳到最后一个。

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