-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>
4

1 回答 1

1

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

jQuery 淡入淡出

于 2013-03-19T16:15:37.800 回答