How to make image slider on mouseover

JavaScript
1

I want to make image slider which works only when I put the cursor on the image div otherwise it stop at first image.
Like in Flipkart when you select any category like Men’s shirts and then you mouseover any shirt then image slides continuously until when you do not move your cursor from outside of the image.
I want to create the slider on mouseover similarly to Flipkart.
Please help me for this.
Thank you!

2

The following script works as you require.

var currentIndex=0, tOut=null;
var targetObj=document.getElementById("firstImg");
targetObj.onmouseover=slideStart;
targetObj.onmouseout=slideStop;
var msgObj=document.getElementById("msg");
var initialSrc=targetObj.src;
var allImages=["B1", "B2", "B3","B4","B5"];
//
 function slideStart()
  { var nextIndex=(currentIndex+1 >= allImages.length)? 0 : currentIndex+1;
    var newSrc=targetObj.src.replace(allImages[currentIndex],allImages[nextIndex]);
    targetObj.src=newSrc;
    currentIndex=nextIndex;
    tOut=setTimeout(slideStart,1000);
    msgObj.innerHTML="Mouseout to stop cycle";
    msgObj.style.color="red";
  }
// ----  
  function slideStop()
  { clearTimeout(tOut);    
    targetObj.src=initialSrc;
    msgObj.innerHTML="Mouse into image to cycle";
    msgObj.style.color="blue";       
  }

There is a working demo HERE

3

Just to be sure you’ve thought this through, you are aware that this won’t work on touchscreen devices, or for anybody using keyboard navigation, aren’t you?

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.