Question

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

现在，我正在尝试为变化的图像添加基本淡入淡出功能。但是淡入淡出效果没有显示出来。当我发出警报时，我注意到淡入淡出正在发生，但没有警报，它太快而无法看到。此外，它发生在上一张图片上，而不是下一张图片。

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

Answer 1

问题在于goLeft方法和goRight方法中的代码块：

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

您正在创建25个计时器，并且每个计时器将在大约1秒后执行。

创建动画最好留给CSS。

在CSS中添加：

#image {
    transition: opacity 0.5s ease;
}

然后在您的JavaScript中，只需：image.style.opacity = 1.0;

当不透明度发生变化时，CSS会自动按照css中定义的速度转换不透明度长度，例如0.5s。随意尝试。

我还在这里添加了一个jsfiddle：http://jsfiddle.net/dya7L8wq/

Answer 2

您误解了setTimeout和for循环。

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

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

您的假设是：

1秒后调用changeOpacity(image, 0)
在第1步之后调用changeOpacity(image, 1) 1秒
在第2步之后调用changeOpacity(image, 2) 1秒
在第3步之后调用changeOpacity(image, 3) 1秒 ....

最后一步是在上一步之后1秒钟调用changeOpacity(image, 24)。

enter image description here

实际发生的是：

循环几乎立即完成！

在每次迭代中，setTimeout对异步函数调用进行排队，就完成了！也就是说，它会立即返回，而不是等到changeOpacity返回。

然后，大约1秒后，changeOpacity几乎同时发射25次，因为你在for循环中排队了25次。

enter image description here

此处的另一个问题是：在changeOpacity次调用中，传入的参数i不是1，2，3 ....，所有都具有相同的值导致for循环退出（1秒前） - 25 ，因为JS在ES6之前没有块范围（在ES6中我们有关键字let。）

在纯JS解决方案中，为了确保时间顺序，我们通常在每个步骤结束时将下一个调用排队：

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

以下是打印1到5的数字列表的示例：

var go = document.getElementById('go')
var op = document.getElementById('output')
var i = 0

function printNum() {
  var p = document.createElement('p')
  p.innerHTML = ++i
  op.appendChild(p)
  
  // next step
  if(i < 5) {
    setTimeout(printNum, 500)
  }
}

go.onclick = printNum

<button id="go">GO</button>
<div id="output"></div>

Answer 3

为什么要使用纯JavaScript？使用 jQuery。 它有一个非常整洁的fadeTo()函数和一个有用的fadeIn()函数。

可能想要使用它;）

为什么我的HTML图像会褪色

3 个答案: