前几天,有个朋友叫我帮他做一个静态网页,并说时间很紧,就半个小时,我这个人比较重情谊,也比较讲义气,所以什么都不说接下来了。在其中他要求总的大小 不能超过500K,原来他自己找人也做了一个版本的,也随便给我了,我也比较懒,所以我就在他的基础上改了。我拿来一看,当时晕了,一个网页竟然有4M, 还说不能超过500K呢。我打开看了看,原来用了好多的Flash,我就给他把一些Flash撤了,但是他说那个淡入淡出的效果不能掉,所以我就加上去, 结果还是800多K。这样我就没办法咯,就只有想用代码来给他实现了,在有限的记忆当中好像曾经看过的,所以上网一收,有淡入淡出的效果,但是没有多张图 片切换的(哎,可能是没找到吧)!所以我就自己把找到的代码研究研究,自己写了个,呵呵…… 运气很好,试了几下就成功了。怕忘了,所以写上来做记录,也方便其他需要的朋友不用到处去找和写了!下面就是我的代码,如果各位有什么好的见解,可以提 出。
以下代码重新进行更新,修改了不兼容Firefox和Opera浏览器。
<
html
>
< head >
< title > dt filter </ title >
< script language = " javascript " >
<!--
var j = 0 ;
var i = 100 ;
var c = false ;
// the array is used to store the picture
names = new Array();
names[ 0 ] = " F001.JPG " ;
names[ 1 ] = " DSC01297.JPG " ;
names[ 2 ] = " DSC08292.JPG " ;
names[ 3 ] = " 11.jpg " ;
names[ 4 ] = " DSCF1670.JPG " ;
var isIE = isIE();
// var isIE = true;
function filter(){
if (document.all);
if (c == true ) {
i ++ ;
}
if (i == 100 ) {
i -- ;
c = false
}
if (i == 1 ) {
i ++ ;
c = true ;
// change the picture
if (j == names.length - 1 ){j = 0 ;}
else { ++ j;}
// alert(j);
// get the picture by the index of names array
myimage.src = names[j];
}
if (c == false ) {
i -- ;
}
// show or hide the picture by filter
// alert(isIE);
if (isIE)
{
myimage.filters.alpha.opacity = i;
}
else
{
myimage.style.opacity = i / 100 ;
}
setTimeout( " filter() " , 50 );
}
function isIE()
{
var ret = false
if (navigator.userAgent.indexOf( " MSIE " ) > 0 )
{
ret = true ;
}
return ret;
}
-->
</ script >
</ head >
< body onload = " filter() " ><!-- load the js function -->
< img id = " myimage " src = " F001.JPG " width = " 500 " height = " 350 "
style = " filter:alpha();position:absolute;top:10;left:0; " >
</ body >
</ html >
< head >
< title > dt filter </ title >
< script language = " javascript " >
<!--
var j = 0 ;
var i = 100 ;
var c = false ;
// the array is used to store the picture
names = new Array();
names[ 0 ] = " F001.JPG " ;
names[ 1 ] = " DSC01297.JPG " ;
names[ 2 ] = " DSC08292.JPG " ;
names[ 3 ] = " 11.jpg " ;
names[ 4 ] = " DSCF1670.JPG " ;
var isIE = isIE();
// var isIE = true;
function filter(){
if (document.all);
if (c == true ) {
i ++ ;
}
if (i == 100 ) {
i -- ;
c = false
}
if (i == 1 ) {
i ++ ;
c = true ;
// change the picture
if (j == names.length - 1 ){j = 0 ;}
else { ++ j;}
// alert(j);
// get the picture by the index of names array
myimage.src = names[j];
}
if (c == false ) {
i -- ;
}
// show or hide the picture by filter
// alert(isIE);
if (isIE)
{
myimage.filters.alpha.opacity = i;
}
else
{
myimage.style.opacity = i / 100 ;
}
setTimeout( " filter() " , 50 );
}
function isIE()
{
var ret = false
if (navigator.userAgent.indexOf( " MSIE " ) > 0 )
{
ret = true ;
}
return ret;
}
-->
</ script >
</ head >
< body onload = " filter() " ><!-- load the js function -->
< img id = " myimage " src = " F001.JPG " width = " 500 " height = " 350 "
style = " filter:alpha();position:absolute;top:10;left:0; " >
</ body >
</ html >