-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でフェードインすることは不可能ではありませんが、JavaScriptを再発明するために時間を費やすべきではないところまで、何百回も行われてきました。フェードスクリプトがどのように機能するかを本当に知りたい場合は、簡単な検索でフェードスクリプトを取得して分解するか、jQueryを使用してこれを行うことをお勧めします。個人的には、jQueryは爆弾の掘り出し物だと思います。

jQueryフェード

于 2013-03-19T16:15:37.800 に答える