Question

我在＆＃34;自动播放＆＃34;：jsfiddle中使用这个纯CSS幻灯片。我想将此幻灯片的转换用于按钮，仅使用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>

你知道我怎么办？我已经尝试但是没有工作。

有关css的信息，请参阅jsfiddle。

Answer 1

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

我已删除animation: imageAnimation 24s linear infinite 0s;元素{幻灯片放映背景图片上的<span>和.cb-slideshow li div上的{{1}}来电，其中一些文字以不同的时序显示，尊重他的背景。现在我有自动播放的幻灯片放映（无法正常工作）和按钮的手动转换，按我的方式工作正常。

纯CSS幻灯片，带有动画延迟淡化淡出效果

1 个答案: