Question

我修改了我发现here的预先设计的幻灯片，我想对其进行编辑，以便自动播放而无需用户点击箭头。但是，我不知道该怎么做。你能用jQuery模拟点击吗？这是最好的方法吗？

Answer 1

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

我使用了无线电输入按钮及其标签：checked伪   用于控制滑动图像的类。因此，如果您从一个图像更改   另一方面，浏览器不会在浏览器历史记录中创建一个步骤   （就像在其他CSS幻灯片中一样）。

玩滑块玩得很开心：）

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

Answer 2

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

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

<input value="0" type="radio" id="button-1" name="controls" 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>

自动播放CSS3幻灯片

2 个答案: