如何在徘徊的情況下定期洗牌圖片

Question

經過研究：
Changing images on hover 是最接近發現的東西，幫助我。它沒有多大幫助。我沒有任何正式的網絡體驗。所以，任何人都會這樣做：a）解決我的問題，但b）真正知道爲什麼這個東西不是在洗牌圖像..

所以這就是我在我的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

選項2：更新codepen

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

Answer 2

你似乎需要的是，當<img>盤旋，定期更改圖像。一般情況下，當您收到mouseenter事件時，將通過啓動間隔計時器，使用setInterval()來完成此操作。每次間隔觸發時都會調用的函數將更改爲下一個圖像。當您收到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>