Как перемешать изображения с регулярными интервалами времени при наведении курсора

Question

После исследования:
Changing images on hover - это самое близкое найденное к чему-то, что мне помогло. Это не помогло. У меня нет официального опыта работы в Интернете. Итак, любой, кто это сделает, было бы неудобно: а) исправить мою проблему, но б) на самом деле знать, почему эта вещь не перетасовывает изображения.

Так вот, где я нахожусь в своем 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> 

Мои 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'); 
} 

Любые советы?

Answer 1

Для достижения ожидаемого результата, используйте счетчик

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: обновленный codepen

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

Answer 2

Что вы, кажется, хотите, чтобы, в то время как <img> наведен, периодически меняйте изображение. Как правило, это будет сделано путем запуска таймера интервалов, используя setInterval(), когда вы получите событие mouseenter. Функция, которая будет вызываться каждый раз, когда срабатывает интервал, изменяется на следующее изображение. Когда вы получаете событие mouseout, вы остановите интервал времени, используя clearInterval().

Следующий код будет циклически изображения при наведении указателя мыши над <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>