无法弄清楚如何添加淡入淡出效果

Question

我如何在此代码中添加淡入淡出？ 我试图使它看起来像这样

http://jsfiddle.net/xmLk4/我尝试了其中的代码，但我不知道如何正确添加它。

<html>
<head>
<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/2000px-000080_Navy_Blue_Square.svg.png"
// set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png"
slideimages[2] = new Image()
slideimages[2].src = "http://static.tumblr.com/674bc8c8a561428e14d7c5abe10d696f/ijaflyo/IdQmnirks/tumblr_static_greenbox.png"
</script>
</head>
<body>
<img src="firstcar.gif" id="slide" width="948" height="403" />

 <script type="text/javascript">

 //variable that will increment through the images
var step=0

function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<2)
 step++
 else
 step=0
//call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)



 }

 slideit()

</script>
</body>
</html>`

Answer 1

我不确定你到底在问什么。

您是说CSS过渡吗？ 如果是这样，请考虑添加

过渡：全部0.6s;

您可以将其添加为img style= "transition:all 0.6s;"

立即尝试

    function slideit(){

   if (!document.images)
      return


        document.getElementById('slide').style.opacity = "0";
    setTimeout(function(){
        document.getElementById('slide').src = slideimages[step].src;
        document.getElementById('slide').style.opacity = "1";
    },500)

        if (step<2)
         step++
         else
         step=0

         setTimeout(slideit,2500)



 }

无法弄清楚如何添加淡入淡出效果

问题描述

1 个解决方案

解决方案1
1 2014-12-24 02:44:37

无法弄清楚如何添加淡入淡出效果

问题描述

1 个解决方案

解决方案1 1 2014-12-24 02:44:37

解决方案1
1 2014-12-24 02:44:37