CODEWITHSUNDEEP
javascriptjquery
Juan Carlos Mariño Fernández
Juan Carlos Mariño Fernández

Reputation: 33

Jquery slide images show without control

I put my code here and in jsfiddle for test, the test it´s here :

https://jsfiddle.net/efuw4oh3/4/

And my code it´s :

HTML

<img class="img0" src="https://i.pinimg.com/564x/4f/b7/0c/4fb70c8f19424fb03c957c9e8081357e.jpg" style="display:none;" width="100" height="100"/>
<img class="img1" src="https://i.pinimg.com/750x/28/4c/44/284c443c6c886c905ca8513a0b13ba29.jpg" style="display:none;" width="100" height="100"/>
<img class="img2" src="https://i.pinimg.com/564x/4f/b7/0c/4fb70c8f19424fb03c957c9e8081357e.jpg" style="display:none;" width="100" height="100"/>
<img class="img3" src="https://i.pinimg.com/750x/28/4c/44/284c443c6c886c905ca8513a0b13ba29.jpg" style="display:none;" width="100" height="100" />

MY SCRIPT

<script>
    i=0;
    $(document).ready(function(){
        loading();
    });

    function loading(){
      if(i==5){
        i=0;
      }
      ///jQuery("#text").show(1000).hide(1000,function(){reloading();});
      jQuery(".img"+i).show(1000).hide(1000,function(){reloading();});
    }

    function reloading(id){
      setInterval("loading()",2000);
      //alert("ok"+i);
      i++;
    }

</script>

The problem basically it´s the images start and show well and the third time, show all images at the same time, and irregular order, i don´t know why because the load of images must be in order, when animation 1 end start the next, etc, and i don´t know why do this

Thank´s for the help, best regards community

Upvotes: 1

Views: 17

Answers (1)

Dan Orlovsky
Dan Orlovsky

Reputation: 1095

The problem you're having is - on the "hide" event you're setting another interval. So, the longer it runs, the more slideshow intervals you'll have running creating this effect.

You should have one slideshow interval that handles the showing/hiding and the increment of the image.

/// Current image   
let i=0;

$(document).ready(function(){
  loading();
});


function loading(){
  // Starts our slideshow
  setInterval(startSlideShow, 2000);
}

function startSlideShow(){
  /// Shows the image
  $(".img"+i).show(1000).hide(1000);
  /// Increments
  i++;
  /// Checks if we're beyond how many images we have.
  if(i === 4) i = 0;
}

Fiddle

Upvotes: 1

Related Questions