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

从 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>

Answer 2

所以我终于弄明白了，经过几个小时，我很兴奋，因为它是如此简单。我一直在使用 .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>

感谢大家的帮助！

Jquery 图像滑块不循环

Jquery Image slider not looping

jquery

loops

image

slider

radio-button