JQuery Image слайдер не зацикливается

Question

У меня проблема с некоторыми из моих JS. У меня есть слайдер изображения, который автоматически прокручивает изображения, а изображение можно выбрать с помощью переключателей, но изображения будут воспроизводиться только один раз, а затем останавливаться.

Это JSFiddle лучше всего работает в хроме - 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>