jquery - 自动播放 CSS3 幻灯片

Question

我修改了我在这里找到的预先设计的幻灯片，我想对其进行编辑，以便它自动播放而无需用户单击箭头。但是，我不确定如何执行此操作。你能用 jQuery 模拟点击吗？这是最好的方法吗？

Answer 1

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

我使用带有 :checked 伪类的单选输入按钮及其标签来控制滑动图像。因此，如果您从一个图像更改为另一个图像，浏览器不会在浏览器历史记录中创建一个步骤（就像在其他 CSS 幻灯片中一样）。

玩我的滑块:)

因此，您可以使用 JQuery 创建一个遍历复选框数组的循环。您可以使用复选框选择器获取复选框数组，并通过使用选中的选择器查找当前选中的单选按钮来迭代当前选中的单选按钮。

Answer 2

这是我想出的解决方案。它获取当前幻灯片并每 3.5 秒前进一次。这特别适用于 4 张幻灯片，而不是教程中显示的 5 张幻灯片。我的脚本还考虑了到达最后一张幻灯片并循环回到第一张幻灯片，以及如果用户自己推进它们，则从最新的幻灯片推进。

每张幻灯片都是这样的......

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

...在当前幻灯片上使用 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>