(精)N张图片在网页上循环播放,效果很是不错

最新推荐文章于 2024-01-27 01:20:09 发布

W_Andy

最新推荐文章于 2024-01-27 01:20:09 发布

阅读量3.1k

点赞数

文章标签： image timer function ie class

<!-- 要完成此效果需要两个步骤

第一步：把如下代码加入到<body>区域中 -->

< STYLE > ...

.spanstyle {...}{

LEFT: -5000px; POSITION: absolute

}

</ STYLE >

< script > ...

<!--

var imgwidth=468

var imgheight=120

var imgurl=new Array()

imgurl[0]="http://www.99new.com.cn/supesite/templates/default/images/logo.gif"

imgurl[1]="http://t6.baidu.com/it/u=2485649216,1661748369&gp=6.jpg"

imgurl[2]="http://t2.baidu.com/it/u=2513178588,3695421077&gp=20.jpg"

imgurl[3]="http://t2.baidu.com/it/u=28391357,514013762&gp=42.jpg"

imgurl[4]="http://t5.baidu.com/it/u=1962086965,3352370983&gp=40.jpg"

imgurl[5]="http://t2.baidu.com/it/u=866208123,4053272798&gp=6.jpg"

var imgpreload=new Array()

for (i=0;i<=imgurl.length-1;i++) ...{

imgpreload[i]=new Image()

imgpreload[i].src=imgurl[i]

}

var x_finalpos=300

var y_finalpos=200

var x_slices=8

var y_slices=3

var pause=10

var screenwidth=800

var screenheight=500

var x_step=new Array()

var y_step=new Array()

var x_randompos=0

var y_randompos=0

var i_loop=0

var max_loop=20

var i_image=0

var width_slice=Math.floor(imgwidth/x_slices)

var height_slice=Math.floor(imgheight/y_slices)

var cliptop=0

var clipbottom=height_slice

var clipleft=0

var clipright=width_slice

var spancounter=0

function initiate() ...{

cliptop=0

clipbottom=height_slice

clipleft=0

clipright=width_slice

i_loop=0

spancounter=0

if (document.all) ...{

for (i=0;i<=y_slices-1;i++) ...{

for (ii=0;ii<=x_slices-1;ii++) ...{

var thisspan=eval("document.all.span"+spancounter+".style")

x_randompos=Math.ceil(screenwidth*Math.random())

y_randompos=Math.ceil(screenheight*Math.random())

thisspan.posLeft=x_randompos

thisspan.posTop=y_randompos

thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

clipleft+=width_slice

clipright+=width_slice

spancounter++

}

clipleft=0

clipright=width_slice

cliptop+=height_slice

clipbottom+=height_slice

}

explode_IE()

}

function changeimage() ...{

spancounter=0

for (i=0;i<=y_slices-1;i++) ...{

for (ii=0;ii<=x_slices-1;ii++) ...{

var thisspan=eval("document.all.span"+spancounter+".style")

thisspan.posLeft=-5000

thisspan.posTop=-5000

spancounter++

}

spancounter=0

if (i_image>imgurl.length-1) ...{i_image=0}

for (i=0;i<=y_slices-1;i++) ...{

for (ii=0;ii<=x_slices-1;ii++) ...{

var thisinnerspan=eval("span"+spancounter)

thisinnerspan.innerHTML="<img src='"+imgurl[i_image]+"'>"

spancounter++

}

i_image++

initiate()

}

function explode_IE() ...{

spancounter=0

if (i_loop<=max_loop-1) ...{

for (i=0;i<=y_slices-1;i++) ...{

for (ii=0;ii<=x_slices-1;ii++) ...{

var thisspan=eval("document.all.span"+spancounter+".style")

x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)

y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)

thisspan.posLeft+=x_step[spancounter]

thisspan.posTop+=y_step[spancounter]

spancounter++

}

i_loop++

var timer=setTimeout("explode_IE()",pause)

}

else ...{

spancounter=0

clearTimeout(timer)

var timer=setTimeout("changeimage()",2000)

}

-->

</ script >

< script > ...

<!--

if (document.all) ...{

for (i=0;i<=y_slices-1;i++) ...{

for (ii=0;ii<=x_slices-1;ii++) ...{

document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")

spancounter++

}

spancounter=0

}

-->

</ script >

<!-- 第二步：把“οnlοad=changeimage()”加在<body>标记里

例如： -->

< body onload =changeimage() >

W_Andy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(精)N张图片在网页上循环播放,效果很是不错

http://www.sina.com.cn --> bbs http://bbs.sina.com.cn -->要完成此效果需要两个步骤第一步：把如下代码加入到区域中-->STYLE>.......spanstyle {...}{...}{...}{LEFT: -5000px; POSITION: absolute}STYLE>script>......var imgwidth=468va
复制链接

扫一扫