javascript实现图片循环渐显播放的代码（图片轮播）

最新推荐文章于 2022-02-27 11:02:54 发布

源码学习分享

最新推荐文章于 2022-02-27 11:02:54 发布

阅读量1.7k

点赞数

分类专栏： H5 js

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

这篇文章主要介绍了javascript实现图片循环渐显播放的方法,涉及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了javascript实现图片循环渐显播放的方法。分享给大家供大家参考。具体实现方法如下：

<html>
    <title>
        图片的循环渐显播放效果代码
    </title>
    
    <head>
        <!--1、将下面的代码插入到HEML的<head></head>之间： -->
        <script language=javaScript>
            < !-- //
            sandra0 = new Image();

            sandra0.src = "/images/m01.jpg";

            sandra1 = new Image();

            sandra1.src = "/images/m02.jpg";

            sandra2 = new Image();

            sandra2.src = "/images/m03.jpg";

            var i_strngth = 1

            var i_image = 0

            var imageurl = new Array()

            imageurl[0] = "/images/m01.jpg"

            imageurl[1] = "/images/m02.jpg"

            imageurl[2] = "/images/m03.jpg"

            function showimage() {

                if (document.all) {

                    if (i_strngth <= 110) {

                        testimage.innerHTML = "<img style='filter:alpha(opacity=" + i_strngth + ")' src=" + imageurl[i_image] + " border=0>";

                        i_strngth = i_strngth + 10

                        var timer = setTimeout("showimage()", 100)

                    }

                    else {

                        clearTimeout(timer)

                        var timer = setTimeout("hideimage()", 1000)

                    }

                }

                if (document.layers) {

                    clearTimeout(timer)

                    document.testimage.document.write("<img src=" + imageurl[i_image] + " border=0>")

                    document.close()

                    i_image++

                    if (i_image >= imageurl.length) {
                        i_image = 0
                    }

                    var timer = setTimeout("showimage()", 2000)

                }

            }

            function hideimage() {

                if (i_strngth >= -10) {

                    testimage.innerHTML = "<img style='filter:alpha(opacity=" + i_strngth + ")' src=" + imageurl[i_image] + " border=0>";

                    i_strngth = i_strngth - 10

                    var timer = setTimeout("hideimage()", 100)

                }

                else {

                    clearTimeout(timer)

                    i_image++

                    if (i_image >= imageurl.length) {
                        i_image = 0
                    }

                    i_strngth = 1

                    var timer = setTimeout("showimage()", 500)

                }

            }

            //-->
            
        </script>
    </head>
    
    <body>
        <!--2、修改<body>语句为：-->
        
        <body onLoad="showimage()">
            <!--3、将下面的代码加入到HEML的<body></body>之间：top:120px;left:240px可以设定显示的位置-->
            <div id="testimage" style="position:absolute;visibility:visible;top:120px;left:240px">
            </div>
        </body>

</html>

原文地址：http://www.xz-src.com/1973.html

源码学习分享

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现图片循环渐显播放的代码（图片轮播）

这篇文章主要介绍了javascript实现图片循环渐显播放的方法,涉及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了javascript实现图片循环渐显播放的方法。分享给大家供大家参考。具体实现方法如下：图片的循环渐显播放效果代码之间： -->
复制链接

扫一扫

专栏目录