How to shuffle images at regular time intervals while hovered

Question

After researching:
Changing images on hover is about the closest found to something that helped me. It didn't help much. I don't have any formal web experience. So, anyone who does, it would be beyond appreciated to a) fix my issue, but b) to actually know why this thing is not shuffling images..

So this is where I'm at in my HTML:

<div class="navBar" id="myNavBar">    
    <ul id="navOptions">

        <li> <img id="logo" 
              src="images/logo.png" 
              onmouseover="hoverFunction(this);" ></li>

        <li class="active"><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</div>

My JavaScript:

function hoverFunction(element) {
    var images = ["images/logo.png",
                  "images/logo_2.png",
                  "images/logo_3.png",
                  "images/logo_4.png",
                  "images/logo.png"];

    for(var i=0; i < images.length; i++){
        $(element).attr("src",images[i]);
    }
    //element.setAttribute('src', 'images/logo_2.png');
}

Any advice?

Answer 1

To achieve expected result, use counter

var counter=1;
function hoverFunction(element) {
   counter++
    var images = ["http://www.w3schools.com/css/img_fjords.jpg",
              "http://www.w3schools.com/css/img_forest.jpg",
              "http://www.w3schools.com/css/img_lights.jpg",
              "http://www.w3schools.com/css/img_fjords.jpg",
              "http://www.w3schools.com/css/img_forest.jpg"];

   $(element).attr("src",images[counter]);
  if(counter ==5){
    counter=1;
  }

//element.setAttribute('src', 'images/logo_2.png');
}

http://codepen.io/nagasai/pen/jAZogO

option2:updated codepen

http://codepen.io/nagasai/pen/WxYwvK

Answer 2

What you appear to want is to, while the <img> is hovered, periodically change the image. Generally, this will be done by starting an interval timer, using setInterval(), when you receive the mouseenter event. The function that would be called each time the interval fires changes to the next image. When you receive the mouseout event, you would then stop the interval timer, using clearInterval().

The following code will cycle through images while the mouse hovers over the <div>:

var images = ["http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a",
              "http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4",
              "http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb",
              "http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/su/su-icon.png?v=0ad5b7a83e49"
];
var curImageIndex = 0; // 0 is displayed by default
var intervalId; //Remember the ID of the interval so we can stop it later.

function startImageCycle(el){
    cycleImage(el); //Cycle the image now so feels responsive. Remove if not wanted.
    intervalId = setInterval(cycleImage,1000,el); //Change image every 1000ms (1s)
}
function stopImageCycle(el){
    clearInterval(intervalId);
}
function cycleImage(element){
    curImageIndex++;
    if(curImageIndex >= images.length) {
        curImageIndex = 0;
    }
    $(element).attr("src", images[curImageIndex]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navBar" id="myNavBar">
      <ul id="navOptions">
        <li>
          <img id="logo" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"
               onmouseenter="startImageCycle(this);" onmouseout="stopImageCycle(this);"
        </li>
        <li class="active"><a href="default.asp">Home</a>
        </li>
        <li><a href="news.asp">News</a>
        </li>
        <li><a href="contact.asp">Contact</a>
        </li>
        <li><a href="about.asp">About</a>
        </li>
      </ul>
    </div>