Question

有人可以帮我解决如何将其变为淡入淡出动画而不是简单的幻灯片效果。当它出现在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>

Answer 1

淡化JavaScript并非不可能，但已经做了数百次，你不应该花时间重新发明它。我建议你通过一个简单的搜索来获取一个淡入淡出的脚本并解构它，如果你真的想知道它是如何工作的，或者只是使用jQuery来做到这一点。就我个人而言，我认为jQuery是炸弹的重要性。

jQuery Fades

如何使这个脚本成为淡入淡出的动画

1 个答案: