0

This is my code.

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

I'm new to javascript. I can fade the image using the buttons but i want it to fade in and out automatically with a timer when untouched. Or if theres any easier way to go about doing this I'll appreciate it.

4

1 回答 1

0

是的。您应该使用 setTimeout 函数。用法与您已经使用的 setInterval 函数非常相似。不同之处在于 Interval 每 X 秒执行一次，而这只是进行一次调用（对不起，如果我对这个解释过于“duh”）。

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