codingtcher.com
Theme Night
Home
Login

change image on hover every seconds javascript

Home » Tutorial Post » change image on hover javascript

<div id="imgchange"><img src="/img/1.png" alt="image not found" id="img" /></div>

var settime;
document.getElementById('imgchange').addEventListener("mouseover", imgchanges);
document.getElementById('imgchange').addEventListener("mouseout", outtime);

function imgchanges(){
document.getElementById('img').src = "/img/2.png";
var myArray = ['/img/1.png', '/img/2.png', '/img/3.png'];
var count = 2;
settime = setInterval(function() {
  if(count >= myArray.length){
  count = 0;
  }
  var rand = myArray[count];
  document.getElementById('img').src = rand;
  count++;
}, 1000);
}
function outtime(){
clearInterval(settime);
document.getElementById('img').src = "/img/1.png";
}

Related Post