Jquery图像滑块不循环

Question

我的一些JS有问题。我有一个自动滚动图像的图像滑块，可以使用单选按钮选择一个图像，但是图像只会播放一次，然后停止。

此JSFiddle在chrome https://jsfiddle.net/jw09363f/中工作得最好。

这是Jquery -

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

        }
    );




    function Backslider() {

        if(tmp != 5) {

        $('input[name=controls]:eq(' + (tmp+1) + ')').attr('checked', 'checked'); 
            tmp = parseInt($('input[name=controls]:checked').val());
        }else{ 
        $('input[name=controls]:eq(' + (tmp-5) + ')').attr('checked', 'checked');
tmp = parseInt($('input[name=controls]:checked').val());
        }}

</script>

这样做的想法是，每个图像都被标记为0-5，当它点击5时，它会将tmp变量重置为0。然而，这种情况并没有发生。

我对JS很陌生，对JQ也很陌生，所以请温柔一点:)

非常感谢，如果还需要更多的细节，请告诉我:)

Answer 1

所以我终于想出了答案，在许多小时之后，我非常激动，以至于事情变得如此简单。我一直在使用.attr作为目标属性，但实际上需要.prop来循环幻灯片。下面的代码还包括一个触发器，以便如果用户单击一个单选按钮(每个图像一个)，那么幻灯片就会停止。

<script type="text/javascript">
    var tmp = 0;
    var autoplay=true;
    $(document).ready(
        function() { 
            tmp = parseInt($('input[name=controls]:checked').val());
            var tid = setInterval(Launcher, 5000);
            $(".clicker").click(function(){
        autoplay=false;
    });
        }

    );
 function Launcher() {

        if(autoplay) {
Backslider();
        }}



    function Backslider() {

        if(tmp != 5) {

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

</script>

谢谢大家的帮助！

Answer 2

我无法很好地从javascript中分辨出，一次显示了多少个图像？如果不是全部五个，请尝试如下：

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

        }
    );




    function Backslider() {

        if(tmp != 6) {

        $('input[name=controls]:eq(' + (tmp+1)%6 + ')').attr('checked', 'checked'); 
            tmp = parseInt($('input[name=controls]:checked').val());
        }else{ 
        $('input[name=controls]:eq(' + (tmp-5)%6 + ')').attr('checked', 'checked');
tmp = parseInt($('input[name=controls]:checked').val());

if (!first)
{
    $('input[name="controls"]:first').appendTo($('input[name="controls"]:last'));
}
first = false;
        }}

</script>