JavaScript中的橫幅旋轉和使用CSS3的動畫

我必須在JavaScript中編寫一個簡單的HTML橫幅旋轉器，並使用CSS3進行動畫過渡。我來到這個：JavaScript中的橫幅旋轉和使用CSS3的動畫

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="css/banner.css" type="text/css" /> 
    <script type="text/javascript" src="scripts/banner.js"></script> 
    </head> 
    <body> 
    <div><img src="img/banner1.jpg" alt="" id="banner" /></div> 
    <script>window.onload = rotateAnimation('banner', 5000);</script> 
    </body> 
</html>

CSS：

#banner { 
    animation-name: myfirst; 
    animation-duration: 5s; 
    animation-timing-function: linear; 
    animation-delay: 0s; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
    animation-play-state: running; 
} 
@keyframes myfirst { 
    0% {opacity: 0;} 
    10% {opacity: 1;} 
    90% {opacity: 1;} 
    100% {opacity: 0;} 
}

的JavaScript：

var i = 0; 
var banners = new Array("img/banner1.jpg", "img/banner2.jpg", "img/banner3.jpg"); 

function rotateAnimation(el, speed) { 
    var elem = document.getElementById(el); 

    elem.src = banners[i]; 

    setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed); 
    i++; 

    if(i === banners.length) i = 0; 
}

但正如我所預料的那樣，動畫本身不同步，我不知道如何僅在一個定時器上製作。

來源

2013-12-19 Michał Czarnecki

你的意思是你想讓它只發生一次嗎？或者設置一次定時器並定期執行它？如果是後者，就有稱爲'setInterval'的東西。也許用它來代替？ http://www.w3schools.com/jsref/met_win_setinterval.asp –

但這仍然是兩個計時器。一個在JS中，另一個在CSS中。 –

糾正我，如果我錯了....你試圖定期更改橫幅源每5秒？ –

-1

它不需要CSS3動畫。它只需要改變圖像和CSS3 trasition屬性的JS腳本。不知道如果JS正在改變某些東西，那麼轉換就行。

來源

2015-08-03 23:57:30

JavaScript中的橫幅旋轉和使用CSS3的動畫

回答

相關問題