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

来源：互联网发布：matlab数据毛刺编辑：程序博客网时间：2024/05/16 23:57

这篇文章主要介绍了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 0