想用滤镜做个简单的,类似 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>
碰到问题是每次换新图片时,滤镜总是遮不住,就是在瞬间能看到下一张图,然后才有慢慢刷过去的那种效果.问题出在哪里呢..<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>
但是新建一个,换背景和刷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>
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>