圖像自動交換腳本大多數時間不顯示圖像？

我有以下腳本運行在我的兩個徽標之間旋轉。我想要做的是頁面將加載，然後圖像將開始直接旋轉到其他圖像與空白。圖像自動交換腳本大多數時間不顯示圖像？

下面是代碼：

var logo1 = "logo2.png"; 
 
var logo2 = "logo1.png"; 
 
var images = new Array (logo1, logo2); 
 
var index = 1; 
 

 
function rotateImage() 
 
{ 
 
    $('.logoimage').fadeOut('slow', function() 
 
    { 
 
    $(this).attr('src', images[index]); 
 

 
    $(this).fadeIn('fast', function() 
 
    { 
 
     if (index == images.length-1) 
 
     { 
 
     index = 0; 
 
     } 
 
     else 
 
     { 
 
     index++; 
 
     } 
 
    }); 
 
    }); 
 
} 
 

 
$(document).ready(function() 
 
{ 
 
    setInterval (rotateImage, 5000); 
 
});

<img class="logoimage" src="logo1.png" onmouseover="this.src='logo2.png'" onmouseout="this.src='logo1.png'" alt="Dear Leader" style="display: inline;">

來源

2015-04-12 Savenz Savisaar Kulbach

爲什麼有兩個標誌？標識的全部要點是其中之一 –

那麼問題是什麼？ – charlietfl

嗯，看着腳本工作的src正在改變那很棒，但徽標圖像並不總是改變它只是閃爍一次。有沒有辦法將這些圖像預加載到變量中？我相信可以通過使用腳本始終重繪它們嗎？ –

而不是使用的onmouseover和onmouseout您可以使用jQuery的hover。

當你在懸停功能時，你必須停止定時器衰落效應，以避免閃爍效應。

我的建議是：

var logo1 = "https://ac3d197e9505f18c50e0-32b9f49f48b2c22be12b40ee79e2acc4.ssl.cf1.rackcdn.com/icon/logos_and_badges_thumbs_up/7x5uDqD4GBTrCSbXggZ-/58C79CAE-C3E6-4D6A-BAF5-A03631274FD7.png"; 
 
var logo2 = "https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png"; 
 
var images = new Array (logo1, logo2); 
 
var index = 1; 
 
var onHovering = false; 
 

 
function rotateImage() { 
 
    if (onHovering) { 
 
    return; // prevent fading while hovering... 
 
    } 
 
    
 
    $('.logoimage').fadeOut('slow', function() { 
 
    $(this).attr('src', images[index]); 
 
    $(this).fadeIn('fast', function() { 
 
     if (index == images.length-1) { 
 
     index = 0; 
 
     } else { 
 
     index++; 
 
     } 
 
    }); 
 
    }); 
 
} 
 

 

 
$(function() { 
 
    setInterval (rotateImage, 1000); 
 
    $('.logoimage').hover(function() { 
 
    onHovering = true; 
 
    $(this).attr('src', images[0]); 
 
    }, function() { 
 
    onHovering = false; 
 
    $(this).attr('src', images[1]); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 

 
<img class="logoimage" src="https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png" alt="Dear Leader" style="display: inline;">

來源

2016-05-02 17:46:29 gaetanoM

圖像自動交換腳本大多數時間不顯示圖像？

回答

相關問題