html - 具有动画延迟淡入淡出效果的纯 CSS 幻灯片

Question

我有这个纯 CSS 幻灯片在“自动播放”中工作:jsfiddle .我想将此幻灯片转换为使用按钮，仅使用 CSS，使用此 HTML:

   <label for="button-4" class="button-label-4"></label>
   <label for="button-1" class="sp-arrow sp-a1"></label>
   <label for="button-2" class="sp-arrow sp-a2"></label>
   <label for="button-3" class="sp-arrow sp-a3"></label>
   <label for="button-4" class="sp-arrow sp-a4"></label>

   <ul class="cb-slideshow">
      <li>
         <span>Image 01</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 02</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 03</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 04</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
   </ul>

你知道我该怎么做吗？我已经尝试过，但不起作用。

参见 jsfiddle用于 CSS。

Answer 1

我更新了代码，现在幻灯片可以使用按钮:jsfiddle

我已经删除了对 animation: imageAnimation 24s linear infinite 0s; 的调用在 <span>元素(幻灯片放映背景图像)和 .cb-slideshow li div某些文本以不同的时间显示的地方尊重他的背景。现在我有了带自动播放功能的幻灯片放映(不能正常工作)和通过按钮手动切换，效果很好，就像我在问题中遇到的那样。