如何使這個腳本變成淡入淡出的動畫

-1

有人可以幫助我如何使這個淡入淡出的動畫，而不是簡單的幻燈片效果。我是新手，當它在JavaScript中。我無法弄清楚如何在淡入淡出動畫中做到這一點。我喜歡這個劇本，因爲它很簡單。如果有任何這樣的jQuery，請分享。以下是我在下面找到的代碼。感謝提前:)如何使這個腳本變成淡入淡出的動畫

<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<style> 
body{ 
background-repeat: no-repeat; 
background-position: 50 50; 
} 
</style> 
<script > 
//Specify background images to slide 
var imgs=new Array() 
imgs[0]="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg"; 
imgs[1]="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg"; 
imgs[2]="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg"; 
//Specify interval between slide (in miliseconds) 
var speed=3000 
//preload images 
var processed=new Array() 
for (i=0;i<imgs.length;i++){ 
processed[i]=new Image(); 
processed[i].src=imgs[i]; 
} 
var inc=-1; 
function slideimg(){ 
if (inc<imgs.length-1) 
inc++; 
else 
inc=0; 
document.body.background=processed[inc].src; 
setTimeout(function(){ 
     slideimg(); 
    }, speed); 
} 

window.onload = function() { 
    slideimg(); 
}; 
</script> 
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1" height="381"> 
    <tr> 
     <td> 
      <p>This is just dummy text</p> 
      <p>This is just dummy text</p> 
      <p>This is just dummy text</p> 
      <p>This is just dummy text</p> 
     </td> 
    </tr> 
</table> 

</body> 
</html>

來源

2013-03-19 user2187151

個人而言，我會使用jQuery使它更容易些代碼和跨瀏覽器兼容。 – j08691 2013-03-19 16:08:08

不是一個真正的答案，所以只需添加評論，但只是谷歌「淡入淡出的動畫JavaScript」。這裏是我發現的第一個教程：http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation – 2013-03-19 16:13:15

通常，我不會通過鏈接到jQuery來回答問題，但由於您的腳本甚至沒有開始褪色的任務，我認爲這是正確的方向。 – iGanja 2013-03-19 16:17:51

做在JavaScript淡入是不可能的，但已經做了幾百次的地方，你不應該花時間重新發明的地步。我建議你通過一個簡單的搜索選擇一個淡入淡出的腳本，並解構它，如果你真的想知道它是如何工作的，或者只是使用jQuery來做到這一點。就我個人而言，我認爲jQuery是炸彈diggadity。

jQuery Fades

來源

2013-03-19 16:15:37 iGanja

如何使這個腳本變成淡入淡出的動畫

回答

相關問題