想用滤镜做个简单的,类似 http://www.chaohao.com/ 中间一页一页切换那种效果.
碰到问题是每次换新图片时,滤镜总是遮不住,就是在瞬间能看到下一张图,然后才有慢慢刷过去的那种效果.问题出在哪里呢..<script language =javascript >
var curIndex=0;
//时间间隔 
var timeInterval=6000;
var arr=new Array();
arr[0]="1.jpg";
arr[1]="2.jpg";
arr[2]="3.jpg";
arr[3]="4.jpg";
 var i=0;
 var k;
var int=setInterval(changeImg,timeInterval);
function changeImg()
{  if (curIndex==arr.length-1)
  {
      curIndex=0;
       }
  else
  {
     curIndex+=1;
  }
  document.getElementById("div2").style.backgroundImage="url("+arr[curIndex]+")";
  k=setInterval(changX,20)
  
}
function changX()
{
     document.getElementById("div2").style.filter="alpha(Opacity=100, FinishOpacity=0, Style=1, StartX="+(1-5)+",StartY=0, FinishX="+i+",FinishY=0)"
    i++;
    if (i==100)
    { 
        i=0;
        clearInterval(k);        
        document.getElementById("div1").style.backgroundImage="url("+arr[curIndex]+")";
   }
    
}
function jump()
{
   window.location.href="#"}
</script>
<div id="div0" style="width:692px">
        <div id="div1"  onclick="jump()" style="background-image:url(1.jpg);  cursor:pointer; overflow:hidden; height:300px; width:692px; border-style:groove; border-width:thin;padding:0px; margin:0px;">
                   <div id="div2" onload="style.filter:alpha(Opacity=0, FinishOpacity=0, Style=1, StartX=0,StartY=0, FinishX=100,FinishY=0" style="width:100%; border:groove; height:100%; filter:alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0,StartY=0, FinishX=100,FinishY=0);background-image:url(1.jpg); "></div>        
    </div>
   
</div>          
        

解决方案 »

  1.   

    可能是由于2个DIV有边框,导致背景图片有错位
      

  2.   

    好像不是这样的问题,div单独放在外面也是这样,backgrou-color:transparent也不行.
    但是新建一个,换背景和刷filter分开就没什么问题.<script language="javascript">
    var i=1;
    var s=0;
    var f=0;
    setInterval(ch,4000)
    function ch()
    {
        document.getElementById("div1").style.backgroundImage="url("+i+".jpg)";
        
        i++;
        if(i>4) i=1;
    }
    s=setInterval(count,10)
    function count()
    {
        if(f<=100)
        {
            document.getElementById("div1").style.filter="alpha(Opacity=100, FinishOpacity=0, Style=1, StartX="+(f-5)+",StartY=0, FinishX="+f+",FinishY=0)"
            f++;
        }
        else{
        f=0;
        }
    }</script>
    <div id="div1" style="width:600; height:300;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=55,StartY=0, FinishX=56,FinishY=0)"></div>
      

  3.   

    改成下面这样又出现那样的问题,图片刷出来之前总会闪一下,那一闪就能看到图片了<script language="javascript">
    var i=1;
    var s=0;
    var f=0;
    setInterval(ch,4000)
    function ch()
    {
        document.getElementById("div1").style.backgroundImage="url("+i+".jpg)";
        
        i++;
        if(i>4) i=1;
        setTimeout(count,10)
    }function count()
    {
        if(f<=100)
        {
            document.getElementById("div1").style.filter="alpha(Opacity=100, FinishOpacity=0, Style=1, StartX="+(f-5)+",StartY=0, FinishX="+f+",FinishY=0)"
            f++;
            setTimeout(count,10)
        }
        else{
        f=0;
        }
        
    }</script>
    <div id="div1" style="width:600; height:300;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=55,StartY=0, FinishX=56,FinishY=0)"></div>