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图像滑块不循环

2 个答案: