0

我有一个 JS 代码，想知道如何添加褪色效果。在代码中，我有 3 张图片。

这是代码：

<html>
    <head>
        <script type="text/javascript">
            var image1 = "pic001.png"
            var image2 = "pic002.png"
            var image3 = "pic006.png"
        </script>
    </head>


    <!--<body onLoad="slidit()">-->
        <body>
        <form name="images">
            <!--<img src="pic001.png" name="slide" width="200" height="200" /> -->
            <img src="pic001.png" name="slide"  />

            <script>

                //variable that will increment through the images
                <!--var step = 1
                function slideit(){
                    //if browser does not support the image object, exit.
                    switch(step){
                        case 1:
                            document.images.slide.src = image1;
                            break;
                        case 2:
                            document.images.slide.src = image2;
                            break;
                        case 3:
                            document.images.slide.src = image3;
                            break;
                    }
                    if (step < 3) {
                        step++
                    }
                    else {
                        step = 1
                    }
                    //call function "slideit()" every 3.5 seconds
                    setTimeout("slideit()", 3500)
                }

                slideit()


            </script>


        </form>
    </body>
</html>

这是褪色效果代码，如何在我的演示代码中插入它？

function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
  var element=document.getElementById(id);
  var opacity = element.style.opacity * 100;
  var msNow = (new Date()).getTime();
  opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
  if (opacity<0) 
    SetOpacity(element,0)
  else if (opacity>100)
    SetOpacity(element,100)
  else
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1);
  }
}
function FadeIn(id)
{
  var element=document.getElementById(id);
  if (element.timer) window.clearTimeout(element.timer); 
  var startMS = (new Date()).getTime();
  element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",0,100)",1);
}
function FadeOut(id)
{
  var element=document.getElementById(id);
  if (element.timer) window.clearTimeout(element.timer); 
  var startMS = (new Date()).getTime();
  element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",100,0)",1);
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
  var foreground=document.getElementById(foregroundID);
  if (backgroundID)
  {
    var background=document.getElementById(backgroundID);
    if (background)
    {
      background.style.backgroundImage = 'url(' + foreground.src + ')';
      background.style.backgroundRepeat = 'no-repeat';
    }
  }
  SetOpacity(foreground,0);
  foreground.src = newImage;
  if (foreground.timer) window.clearTimeout(foreground.timer); 
  var startMS = (new Date()).getTime();
  foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "',1000," + startMS + ",0,100)",10);
}
4

2 回答 2

1

你为什么不使用jQuery 淡入/淡出..？

于 2011-05-02T12:12:36.323 回答
0

您不需要使用该功能，只需纯 CSS 和 Javascript

并且记得加上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<3)
             step++
             else
             step=1

             setTimeout(slideit,3500)



     }
于 2014-12-24T11:19:04.807 回答