利用JavaScript使图片淡隐淡出问题

在使用JavaScript使图片淡隐淡出时是不是图片太大会影响稳定性，我在用一些图片时会出现这情况，状态栏会不断闪烁“下载”“完成”，好像图片没换一次就要重新下载一下一样，这是为什么？怎么解决？
JavaScript代码如下：
sandra0 = new Image();
sandra0.src = "image1.gif";
sandra1 = new Image();
sandra1.src = "image2.gif";
sandra2 = new Image();
sandra2.src = "image3.gif";
sandra3 = new Image();
sandra3.src = "image4.gif";
sandra4 = new Image();
sandra4.src = "image5.gif";var i_strngth=1
var i_image=0
var imageurl = new Array()
imageurl[0] ="图片材料/div1.png"
imageurl[1] ="图片材料/div2.png"
imageurl[2] ="图片材料/div3.png"
imageurl[3] ="图片材料/div4.png"
imageurl[4] ="图片材料/div5.png"
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()",5000)
    } 
}
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) 
     }
}
  

解决方案 »

  1.   

    lz你是整个地重写innerHTML
    这样当图片大或者网速不好的时候，有可能会有问题，建议通过js来调节图片的样式,src属性只在刚开始显示的时候设置一次就可以了
      

  2.   

    换个方向问问，假如有个img标签的id为img1;在js函数中怎么通过document.getElementById("img1")的方式来达到<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>的效果，也就是document.getElementById("img1").style.后面怎么写，后面的属性太长，不知道格式是怎么样的，就如document.getElementById("img1").style.display="none";这样的
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
    <html>   
        <head>   
            <title>tab.html</title>   
            <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
            <meta http-equiv="description" content="this is my page">   
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
            <style type="text/css">   
                .subject {   
                    border: 1px solid black;   
                    width: 200px;   
                    height: 200px;   
                }   
            </style>   
            <script type="text/javascript">   
            var imgAry = new Array();   
            imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg");   
            imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");   
            imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg");   
            imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");   
            imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af1f2677d0135e23.jpg");   
               
            window.onload = function () {   
                var oBox = document.getElementById("subjectBox");   
                var oShowId = document.getElementById("showId").value;   
                var subjectHtml = "";   
                for (var i = 1; i <= 4; i++) {   
                    if (i == oShowId) {   
                        subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: block;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"  
                    } else {   
                        subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: none;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"  
                    }   
                }   
                oBox.innerHTML = subjectHtml;   
                showSubject2("next");   
            };   
               
            function setHide() {   
                var allDiv = document.getElementsByName("showDiv");   
                for (var i = 0; i < allDiv.length; i++) {   
                    if (allDiv[i].style.display != "none") {   
                        allDiv[i].style.display = "none";   
                    }   
                }   
            }   
                       
               
            //方法一：   
            function showSubject(flag) {   
                var oShowId = document.getElementById("showId").value;   
                var allDiv = document.getElementsByName("showDiv");   
                var len = allDiv.length;   
                //alert(oShowId + ":" + len);   
                setHide();//隐藏所有div   
                if (flag == "next") {   
                    oShowId = eval(oShowId) + 1;   
                    if (oShowId > len) {   
                        oShowId = 1;   
                    }   
                    document.getElementById("div_" + oShowId).style.display = "block";   
                } else {   
                    oShowId = eval(oShowId) - 1;   
                    if (oShowId < 1) {   
                        oShowId = len;   
                    }   
                    document.getElementById("div_" + oShowId).style.display = "block";   
                }   
                document.getElementById("showId").value = oShowId;   
            }   
               
            //方法二：   
            function showSubject2(flag) {   
                var allDiv = document.getElementsByName("showDiv");   
                for (var i = 0, len = allDiv.length; i < len; i++) {   
                    if (allDiv[i].style.display == "block") {   
                        allDiv[i].style.display = "none";   
                        if (flag == "next") {   
                            if (i < len) {   
                                i += 1;   
                            }   
                            if (i >= len) {   
                                i = 0;   
                            }   
                        } else {   
                            if (i > 0) {   
                                i -= 1;   
                            }   
                            if (i <= 0) {   
                                i = len - 1;   
                            }   
                        }   
                        allDiv[i].style.display = "block";   
                        break;   
                    }   
                }   
                setTimeout("showSubject2('next')", 1000);//动态更换图片   
            }   
        </script>   
        </head>   
      
        <body>   
            方法1：   
            <input type="button" value="上" onclick="showSubject('prev')" />   
            <input type="button" value="下" onclick="showSubject('next')" />   
            <input type="hidden" id="showId" value="1" />   
            <br />   
            方法2：   
            <input type="button" value="上" onclick="showSubject2('prev')" />   
            <input type="button" value="下" onclick="showSubject2('next')" />   
            <div id="subjectBox">   
            </div>   
        </body>   
    </html>  本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx
    参考：JavaScript js 动态更换、播放图片特效：http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx
    jQuery 变动图片、滤镜效果：http://blog.csdn.net/IBM_hoojo/archive/2010/06/08/5655506.aspx