CODEWITHSUNDEEP
javascripthtmlcss
tomassilny
tomassilny

Reputation: 1121

Next Image after 3 seconds

I have image gallery with next/previus buttons and I want auto change image to next image after 3 seconds. How can I do it? This code in Javascript:

var ary=[
'images/image1.png',            
'images/image2.jpg',
'images/image3.jpg',
'images/image4.jpg',
'images/image4.jpg',
'images/image4.jpg'
];

function Slide(id,ary,nu){
 document.getElementById(id).src = ary[nu];
 Slide[id] = {nu: nu};  
}

function nextImage(id, ary, ud){
  var nu = (Slide[id]&&Slide[id].nu?Slide[id].nu:0) + ud;  
  Slide(id, ary, Math.min(Math.max(nu, 0), ary.length-1));
}

Thanks for every answer.

Upvotes: 1

Views: 334

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can do something like this DEMO

<div class="image">
  <img src="http://placehold.it/350x150">
</div>

JS

$(function () {
  count = 0;
  images = ["http://placehold.it/350x150/FF0000", "http://placehold.it/350x150/4A84EB", "http://placehold.it/350x150/45BAE4", "http://placehold.it/350x150"];

  setInterval(function () {
    count++;
    $(".image img").fadeOut(400, function () {
      var next = images[count % images.length];
      $(this).attr('src', next).fadeIn(400);
    });
  }, 3000);
});

Upvotes: 3

Related Questions