Fatal编程技术网
  • javascript/
  • Javascript 为什么赢了'；我的HTML图像不会褪色吗

Javascript 为什么赢了'；我的HTML图像不会褪色吗

javascript html

Javascript 为什么赢了'；我的HTML图像不会褪色吗,javascript,html,fade,Javascript,Html,Fade,我正在尝试创建一个简单的幻灯片效果。我有10张图片，我已经创建了一个基本的HTML页面，有两个按钮可以转到右边或左边的图片。单击按钮后，图像会发生变化 现在，我正在尝试为不断变化的图像添加一个基本的淡入淡出功能。但是淡入淡出的效果没有显示出来。当我发出警报时，我注意到淡出正在发生，但是没有警报，淡出的速度太快，以至于看不见。而且，它发生在上一张图像上，而不是下一张图像上 <html> <head> <style> .main {

我正在尝试创建一个简单的幻灯片效果。我有10张图片，我已经创建了一个基本的HTML页面，有两个按钮可以转到右边或左边的图片。单击按钮后，图像会发生变化

现在，我正在尝试为不断变化的图像添加一个基本的淡入淡出功能。但是淡入淡出的效果没有显示出来。当我发出警报时，我注意到淡出正在发生，但是没有警报，淡出的速度太快，以至于看不见。而且，它发生在上一张图像上，而不是下一张图像上

    <html>
<head>
    <style>
        .main {
            text-align: center;
        }
        .centered {
            display: inline-block;
        }
        #image {
            border: solid 2px;
            width: 500px;
            height: 500px;
        }
        #number {
            font-size: 30px;
        }
    </style>
    <script>
        function goLeft() {
            var image = document.getElementById("image");
            var pos = document.getElementById("number");
            if(Number(pos.innerHTML)==1) {
                image.src = "Images\\10.jpg"
                pos.innerHTML = 10;
            } else {
                image.src = "Images\\" + (Number(pos.innerHTML)-1).toString() + ".jpg"
                pos.innerHTML = (Number(pos.innerHTML)-1).toString();
            }
            for (var i=0; i<25; i++) {
                setTimeout(changeOpacity(image, i), 1000);
            }
        }

        function changeOpacity(image, i) {
            alert(parseFloat(i*4/100).toString());
            image.style.opacity = (parseFloat(i*4/100).toString()).toString();
        }

        function goRight() {
            var image = document.getElementById("image");
            var pos = document.getElementById("number");
            if(Number(pos.innerHTML)==10) {
                image.src = "Images\\1.jpg"
                pos.innerHTML = 1;
            } else {
                image.src = "Images\\" + (Number(pos.innerHTML)+1).toString() + ".jpg"
                pos.innerHTML = (Number(pos.innerHTML)+1).toString();
            }
            for (var i=0; i<25; i++) {
                setTimeout(changeOpacity(image, i), 1000);
            }
        }
    </script>
</head>
<body>
    <div class="main">
        <div class="centered">
            <img id="image" src="Images\1.jpg">
        </div>
    </div>
    <div class="main">
        <div class="centered">
            <span id="number">1</span>
        </div>
    </div>
    <div class="main">
        <div class="centered">
            <button onclick="goLeft()" style="margin-right:50px;">Go Left</button>
            <button onclick="goRight()" style="margin-left:50px;">Go Right</button>
        </div>
    </div>
</body>


梅因先生{
文本对齐：居中；
}
.居中{
显示：内联块；
}
#形象{
边框：实心2px；
宽度：500px；
高度：500px；
}
#数{
字体大小：30px；
}
函数goLeft（）{
var image=document.getElementById（“image”）；
var pos=document.getElementById（“编号”）；
如果（数字（pos.innerHTML）==1）{
image.src=“Images\\10.jpg”
pos.innerHTML=10；
}否则{
image.src=“Images\\”+（数字（pos.innerHTML）-1.toString（）+“.jpg”
pos.innerHTML=（Number（pos.innerHTML）-1.toString（）；
}
对于（var i=0；i为什么要使用纯JavaScript？
使用jQuery。
它有一个非常简洁的
fadeTo（）
函数和一个有用的
fadeIn（）
函数


可能想使用它；）
问题在于
goLeft
方法和
goRight
方法中的这段代码：


for (var i=0; i<25; i++) {
    setTimeout(changeOpacity(image, i), 1000);
}


然后在JavaScript中，只需：
image.style.opacity=1.0；

当不透明度改变时，CSS将以CSS中定义的速度自动转换不透明度长度，例如
0.5s
。请随意尝试


我还在这里添加了一个jsfiddle:
您误解了
setTimeout
和
for
循环

诺曼的回答为CSS提供了一个很好的解决方案，但是他没有太多地谈论为什么你的代码不工作。所以我想解释一下


for (var i=0; i<25; i++) {
    setTimeout(changeOpacity(image, i), 1000);
}


下面是一个打印从1到5的数字列表的示例：



var go=document.getElementById（'go'））
var op=document.getElementById（'output'）
变量i=0
函数printNum（）{
var p=document.createElement（'p'）
p、 innerHTML=++i
执行部分（p）
//下一步
如果（i<5）{
设置超时（printNum，500）
}
}
go.onclick=printNum


GO

我真的很感谢你的回复，Leo。这让我明白了事情的真相，我明白我做错了什么。非常感谢。我一直在寻找纯JavaScript解决方案。事实上，我正在尝试学习JavaScript，所以我并不真的想使用JQuery。但是，是的，如果我为一个网站工作，那肯定更有意义。

for (var i=0; i<25; i++) {
    setTimeout(changeOpacity(image, i), 1000);
}



function changeOpacity() {
    // do something here
    // before the function returns, set up a future invocation
    setTimeout(changeOpacity, 1000)
}