当前位置：文江博客话题详情

JavaScript image fading

如何在 JavaScript 中添加淡入淡出效果

发布于 2024-11-04 12:03:19 字数 3441 浏览 4 评论 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);
}

I have a JS code and would like to know how to add a fading effect. In the code I have 3 images.

Here is the code:

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

This is the fading effect code, how can I insert this in my demo code?

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);
}

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

撞了怀 2024-11-11 12:03:23

您不需要使用该功能，只需纯 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)



     }

You don't need to use that funtion, just pure CSS and Javascript

And remember to add 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)



     }

回复收藏 0 原文

风情万种。 2024-11-11 12:03:22

为什么不使用jQuery fadein/out..？

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文