自动播放CSS3幻灯片

Question

我修改了一个预先设计的幻灯片，我发现here，我想对其进行编辑，以便在用户不必点击箭头的情况下进行自动播放。不过，我不确定如何做到这一点。你能用jQuery模拟点击吗？这是做这件事的最好方法吗？

Answer 1

这是我提出的解决方案。它获得当前的幻灯片并每3.5秒进步一次。这适用于4张幻灯片，而不是本教程中显示的5张幻灯片。我的脚本还包含到达最后一张幻灯片并循环回到第一张幻灯片，以及如果用户自行推进幻灯片，则从最新的幻灯片前进。

每张幻灯片看起来像这样...

<input value="0" type="radio" id="button-1" name="controls" checked="checked"/> 

...与检查=在当前幻灯片 “检查”。每张幻灯片的值为0，1，2，3，...，n。

<script type="text/javascript"> 
     var tmp = 0; 
     $(document).ready(
      function() { 
       tmp = parseInt($('input[name=controls]:checked').val()); 
       var tid = setInterval(advance, 3500); 
      } 
     ); 

     function advance() { 
      if(tmp == 3) { 
       $('input[name=controls]:eq(0)').attr('checked', 'checked'); 
       tmp = 0; 
      } 
      else { 
       $('input[name=controls]:eq(' + (tmp+1) + ')').attr('checked', 'checked'); 
       tmp = parseInt($('input[name=controls]:checked').val()); 
      } 
     } 

     function abortTimer() { clearInterval(tid); } 
    </script> 

Answer 2

他说他正在使用单选按钮的checked属性。

我用无线电输入按钮和它们的标签与：检查伪 类来控制滑动图像。因此，如果您从一个图像 更改为另一个浏览器不会在浏览器历史记录 （如在其他CSS幻灯片）中创建一个步骤。

有乐趣我的滑块:)

所以你也可以创建与jQuery一个循环，通过复选框的阵列去。您可以使用checkbox selector获得一组复选框，并通过使用checked选择器找到当前选中的单选按钮来迭代当前选中哪个单选按钮。