JavaScript淡出过渡

Question

我是JavaScript的新手，想知道如何将fadeout过渡添加到以下脚本中？感谢。

<script type="text/javascript">
        var curimg=0
        function rotateimages(){
            document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg])
            curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
        }
        window.onload=function(){
            setInterval("rotateimages()", 10000)
        }
    </script>

Answer 1

要轻松完成此操作，我们需要在幻灯片中使用jQuerys .fadeOut()方法。当rotateimages()被调用时，我们想要淡出sideshow元素，然后再次显示幻灯片（我将淡化下一张图像，以便我们有一个平滑的效果）。

function rotateimages() 
{
    $( "#slideshow" ).fadeOut( "slow", function() {
        document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg].src)
        curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
    });
    $( "#slideshow" ).fadeIn( "slow" );
}

在这种情况下，我们正在做的是淡化#slideshow元素本身。

Here is a Fiddle example稍作修改，我添加了一些通用图片。我们最终获得了很好的幻灯片效果。