0

これは私のコードです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fading JavaScript Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">

 var fadeEffect=function(){
return{
    init:function(id, flag, target){
        this.elem = document.getElementById(id);
        clearInterval(this.elem.si);
        this.target = target ? target : flag ? 100 : 0;
        this.flag = flag || -1;
        this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
        this.si = setInterval(function(){fadeEffect.tween()}, 30);
    },
    tween:function(){
        if(this.alpha == this.target){
            clearInterval(this.si);
        }else{
            var value = Math.round(this.alpha + ((this.target - this.alpha) * .07)) + (1 * this.flag);
            this.elem.style.opacity = value / 100;
            this.elem.style.filter = 'alpha(opacity=' + value + ')';
            this.alpha = value

        }
    }
}
}();

var fadeEffect2=function(){
return{
    init:function(id, flag, target){
        this.elem = document.getElementById(id);
        clearInterval(this.elem.si);
        this.target = target ? target : flag ? 100 : 0;
        this.flag = flag || -1;
        this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
        this.si = setInterval(function(){fadeEffect2.tween()}, 30);
    },
    tween:function(){
        if(this.alpha == this.target){
            clearInterval(this.si);
        }else{
            var value = Math.round(this.alpha + ((this.target - this.alpha) * .07)) + (1 * this.flag);
            this.elem.style.opacity = value / 100;
            this.elem.style.filter = 'alpha(opacity=' + value + ')';
            this.alpha = value

        }
    }
}
 }();
var fadeEffect3=function(){
return{
    init:function(id, flag, target){
        this.elem = document.getElementById(id);
        clearInterval(this.elem.si);
        this.target = target ? target : flag ? 100 : 0;
        this.flag = flag || -1;
        this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
        this.si = setInterval(function(){fadeEffect3.tween()}, 30);
    },
    tween:function(){
        if(this.alpha == this.target){
            clearInterval(this.si);
        }else{
            var value = Math.round(this.alpha + ((this.target - this.alpha) * .07)) + (1 * this.flag);
            this.elem.style.opacity = value / 100;
            this.elem.style.filter = 'alpha(opacity=' + value + ')';
            this.alpha = value

        }
    }
}
}();


</script>

</head>
<body>

<div id="wrapper">
<div id="fade"></div>

<div id="fade1"></div>

<div id="fade2">
<div class="link"> <a href="http://www.your_link.com" style="display:block; height:100%;    width:100%;"></a></div>

</div>

</div>

<div class="button" onclick="fadeEffect.init('fade', 1);fadeEffect2.init('fade1',0);fadeEffect3.init('fade2',0);myFunction()">pic 1</div>
<div class="button" onclick="fadeEffect.init('fade',0);fadeEffect2.init('fade1',1);fadeEffect3.init('fade2',0)">pic 2</div>
<div class="button" onclick="fadeEffect.init('fade',0);fadeEffect2.init('fade1',0);fadeEffect3.init('fade2',1)">pic 3</div>

</body>
</html>

私はjavascriptが初めてです。ボタンを使用して画像をフェードすることはできますが、手を付けていないときにタイマーで自動的にフェードインおよびフェードアウトしたいです。または、これを行うための簡単な方法があれば、感謝します。

4

1 に答える 1

0

はい。setTimeout関数を使用する必要があります。使用法は、すでに使用したsetInterval関数と非常によく似ています。違いは、IntervalがX秒ごとにそれを実行するのに対し、これは1回の呼び出しを行うだけであるということです（この説明で「ばかげている」場合は申し訳ありません）。

setTimeout(function () {
    //here you fade out whatever you want
}, 3000); //the 3000 means milliseconds, so 3 seconds.
于 2012-10-04T04:56:04.530 に答える