javascript - 如何在没有 jquery 的情况下向此代码添加淡入和淡出过渡

Question

这是一个相当基本的代码，用于使用 css 和 javascript 在 html 中制作幻灯片。 这是 javascript 部分，如何在没有 jquery 的情况下向此代码添加淡入和淡出

<script type="text/javascript">
    var step = 0
    var whichimage = 0

    function slideit() {

        if (!document.images)
            return
        document.getElementById('slide').src = slideimages[step].src
        whichimage = step
        if (step < 3)
            step++
        else
            step = 0

        setTimeout("slideit()", 5000)
    }

    slideit()
</script>

Answer 1

最简单的方法是使用 CSS 来设置元素不透明度的动画:

var el = document.getElementById('e');
setInterval(function(){
  el.className = el.className == '' ? 'show' : '';
}, 2000);

#e {display: inline-block; width: 50px; height: 50px; background: #afa; opacity: 0; transition: opacity 1s linear}
#e.show {opacity: 1}

<div id="e"></div>

<小时/>

在您的情况下，您必须使用 setTimeouts 设置前一个元素何时淡出以及新元素何时淡入。我可以为您编写更准确的代码，但不能没有看到标记/整个内容。这应该足以让您开始。