求一款能兼容IE和火狐的滤镜图片切换效果DEMO，谢谢了。

如题，希望能有高手出现。

解决方案 »

  1.   

    var count = 0;
    var sint = setInterval(function(){
    if(count >= 100){clearInterval(sint);}
    document.getElementById('text').style.filter = 'alpha(opacity='+count+')';
    document.getElementById('text').style.opacity = count / 100;
    count += 10;

    },100)页面上写个<div id="text">11111111111111</div>只要id为text就行了
      

  2.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>大幅图片广告代码演示</title>
    <style type="text/css">
    img {border:0px;}
    .col1
    {
    background-image:url(images/whitebg.jpg);
    background-repeat:no-repeat;
      float:right; 
      width:12px; 
      height:12px;
      margin:0 5px;
      cursor:pointer;
    }
    .col2
    {
      background-image:url(images/yellowbg.jpg);
      background-repeat:no-repeat;
      float:right; 
      width:12px;
      height:12px;
      margin:0 5px;
      cursor:pointer;
      
    }
    </style>
    <script>
        var img1 = document.createElement("img");
        var img2 = document.createElement("img");
        var img3 = document.createElement("img");
        img1.src = "images/1.jpg";
        img2.src = "images/2.jpg";
        img3.src = "images/3.jpg";
    </script>
    <script language="javascript">
    var index=1;
    function auto()
    {
     tip(index);
     index=index+1;
     if(index>3)
      index=1;
    }
    function tip(par)
    {
     
      var object="oDIV"+par;
      
      document.getElementById("oDIV1").style.display="none";
      document.getElementById("oDIV2").style.display="none";
      document.getElementById("oDIV3").style.display="none";
    /*  document.getElementById("oDIV1").style.opacity=0;
      document.getElementById("oDIV2").style.opacity=0;
      document.getElementById("oDIV3").style.opacity=0;
      document.getElementById("test").style.opacity=0;*/
      
       var count = 0;
        var sint = setInterval(function(){
            if(count >= 100){clearInterval(sint);}
            document.getElementById(object).style.filter = 'alpha(opacity='+count+')';

            document.getElementById(object).style.opacity = count / 100;
    document.getElementById("test").style.filter = 'alpha(opacity='+count+')';
            document.getElementById("test").style.opacity = count / 100;
            count +=10;
            
        },100)
      document.getElementById(object).style.display="";
      if(object=="oDIV1")
      {
        document.getElementById('test').style.backgroundImage = "url(images/1.jpg)";
        document.getElementById('test').style.backgroundPosition = "top";
      }
       if(object=="oDIV2")
      {
        document.getElementById('test').style.backgroundImage = "url(images/2.jpg)";
        document.getElementById('test').style.backgroundPosition = "top";
      }
       if(object=="oDIV3")
      {
        document.getElementById('test').style.backgroundImage = "url(images/3.jpg)";
        document.getElementById('test').style.backgroundPosition = "top";
      }
      
      
      document.getElementById("col1").className="col1"; 
      document.getElementById("col2").className="col1"; 
      document.getElementById("col3").className="col1"; 
      document.getElementById("col"+par).className="col2"; 
    }
    setInterval(auto,2000);
    </script>
    </head>
    <body>
    <div id="test" style="width:100%; height:350px; border:1px solid red;"> 
        <center>
    <div style="width:778px; margin:0 auto;"><table  border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td>  
                
                    <a href="#" target="_blank"><img class=pic id=oDIV1 src="images/4.jpg" width=788 height=330 ></a>
                    <a href="#" target="_blank"><img class=pic id=oDIV2 src="images/5.jpg" width=788 height=330 style="DISPLAY: none;"></a>
                    <a href="#" target="_blank"><img class=pic id=oDIV3 src="images/6.jpg" width=788 height=330 style="DISPLAY: none;"></a>
                
    <div style="position:absolute; float:right; left:45%; top:270px;">
     <div id="col1" onClick="tip(1)"></div>
     <div id="col2" onClick="tip(2)"></div>
                 <div id="col3" onClick="tip(3)"></div>
    </div> 
            </td>
          </tr>
        </table>
        
        </div></center>

    </div>
    </body>
    </html>
    <script>
      window.onload=function (){
       document.getElementById('test').style.backgroundImage = "url(images/1.jpg)";
        document.getElementById('test').style.backgroundPosition = "top";
      }</script>
    北北快来呀，帮个忙呀， 滤镜效果是有了，不过切图片的时候闪动丫，帮我改改吧，，哪里出问题啦。。
      

  3.   

    懒人图库有很多，去找吧http://www.lanrentuku.com/js/jiaodiantu.htmlhttp://d.lanrentuku.com/down/js/jiaodiantu-392/