3张图片循环组和(很有动感)

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

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

<STYLE> 
.spanstyle { 
    LEFT: -5000px; POSITION: absolute 
} 
</STYLE> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%3C!--%20%20%0D%0Avar%20imgwidth%3D468%20%0D%0Avar%20imgheight%3D120%20%0D%0Avar%20imgurl%3Dnew%20Array()%20%0D%0Aimgurl%5B0%5D%3D%22%2Ffiles%2Fpic%2F20050817%2F200581702204033863.gif%22%20%0D%0Aimgurl%5B1%5D%3D%22%2Ffiles%2Fpic%2F20050817%2F200581702204648587.gif%22%20%0D%0Aimgurl%5B2%5D%3D%22%2Ffiles%2Fpic%2F20050817%2F200581702204999274.jpg%22%20%0D%0Avar%20imgpreload%3Dnew%20Array()%20%0D%0Afor%20(i%3D0%3Bi%3C%3Dimgurl.length-1%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20imgpreload%5Bi%5D%3Dnew%20Image()%20%0D%0A%20%20%20%20imgpreload%5Bi%5D.src%3Dimgurl%5Bi%5D%20%0D%0A%7D%20%0D%0Avar%20x_finalpos%3D300%20%0D%0Avar%20y_finalpos%3D200%20%0D%0Avar%20x_slices%3D8%20%0D%0Avar%20y_slices%3D3%20%0D%0Avar%20pause%3D10%20%0D%0Avar%20screenwidth%3D800%20%0D%0Avar%20screenheight%3D500%20%0D%0Avar%20x_step%3Dnew%20Array()%20%0D%0Avar%20y_step%3Dnew%20Array()%20%0D%0Avar%20x_randompos%3D0%20%0D%0Avar%20y_randompos%3D0%20%0D%0Avar%20i_loop%3D0%20%0D%0Avar%20max_loop%3D20%20%0D%0Avar%20i_image%3D0%20%0D%0Avar%20width_slice%3DMath.floor(imgwidth%2Fx_slices)%20%0D%0Avar%20height_slice%3DMath.floor(imgheight%2Fy_slices)%20%0D%0Avar%20cliptop%3D0%20%0D%0Avar%20clipbottom%3Dheight_slice%20%0D%0Avar%20clipleft%3D0%20%0D%0Avar%20clipright%3Dwidth_slice%20%0D%0Avar%20spancounter%3D0%20%0D%0A%0D%0Afunction%20initiate()%20%7B%20%0D%0A%20%20%20%20cliptop%3D0%20%0D%0A%20%20%20%20clipbottom%3Dheight_slice%20%0D%0A%20%20%20%20clipleft%3D0%20%0D%0A%20%20%20%20clipright%3Dwidth_slice%20%0D%0A%20%20%20%20i_loop%3D0%20%0D%0A%20%20%20%20spancounter%3D0%20%0D%0A%20%20%20%20if%20(document.all)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20for%20(i%3D0%3Bi%3C%3Dy_slices-1%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20(ii%3D0%3Bii%3C%3Dx_slices-1%3Bii%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20thisspan%3Deval(%22document.all.span%22%2Bspancounter%2B%22.style%22)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x_randompos%3DMath.ceil(screenwidth*Math.random())%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y_randompos%3DMath.ceil(screenheight*Math.random())%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20thisspan.posLeft%3Dx_randompos%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20thisspan.posTop%3Dy_randompos%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20thisspan.clip%20%3D%22rect(%22%2Bcliptop%2B%22%20%22%2Bclipright%2B%22%20%22%2Bclipbottom%2B%22%20%22%2Bclipleft%2B%22)%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clipleft%2B%3Dwidth_slice%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clipright%2B%3Dwidth_slice%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20spancounter%2B%2B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clipleft%3D0%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clipright%3Dwidth_slice%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20cliptop%2B%3Dheight_slice%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20clipbottom%2B%3Dheight_slice%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%7D%20%0D%0A%20%20%20explode_IE()%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20changeimage()%20%7B%20%0D%0A%20%20%20%20spancounter%3D0%20%0D%0A%20%20%20%20for%20(i%3D0%3Bi%3C%3Dy_slices-1%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20for%20(ii%3D0%3Bii%3C%3Dx_slices-1%3Bii%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20thisspan%3Deval(%22document.all.span%22%2Bspancounter%2B%22.style%22)%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20thisspan.posLeft%3D-5000%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20thisspan.posTop%3D-5000%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20spancounter%2B%2B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20spancounter%3D0%20%0D%0A%20%20%20%20if%20(i_image%3Eimgurl.length-1)%20%7Bi_image%3D0%7D%20%0D%0A%20%20%20%20for%20(i%3D0%3Bi%3C%3Dy_slices-1%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20for%20(ii%3D0%3Bii%3C%3Dx_slices-1%3Bii%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20thisinnerspan%3Deval(%22span%22%2Bspancounter)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20thisinnerspan.innerHTML%3D%22%3Cimg%20src%3D'%22%2Bimgurl%5Bi_image%5D%2B%22'%3E%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20spancounter%2B%2B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20i_image%2B%2B%20%0D%0A%20%20%20%20initiate()%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0Afunction%20explode_IE()%20%7B%20%0D%0A%20%20%20%20spancounter%3D0%20%0D%0A%20%20%20%20if%20(i_loop%3C%3Dmax_loop-1)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20for%20(i%3D0%3Bi%3C%3Dy_slices-1%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20(ii%3D0%3Bii%3C%3Dx_slices-1%3Bii%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20thisspan%3Deval(%22document.all.span%22%2Bspancounter%2B%22.style%22)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x_step%5Bspancounter%5D%3D(x_finalpos-thisspan.posLeft)%2F(max_loop-i_loop)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y_step%5Bspancounter%5D%3D(y_finalpos-thisspan.posTop)%2F(max_loop-i_loop)%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20thisspan.posLeft%2B%3Dx_step%5Bspancounter%5D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20thisspan.posTop%2B%3Dy_step%5Bspancounter%5D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20spancounter%2B%2B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20i_loop%2B%2B%20%0D%0A%20%20%20%20%20%20%20%20var%20timer%3DsetTimeout(%22explode_IE()%22%2Cpause)%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20spancounter%3D0%20%0D%0A%20%20%20%20%20%20%20%20clearTimeout(timer)%20%0D%0A%20%20%20%20%20%20%20%20var%20timer%3DsetTimeout(%22changeimage()%22%2C2000)%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A--%3E%20%0D%0A%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%3C!--%20%0D%0Aif%20(document.all)%20%7B%20%0D%0A%20%20%20%20for%20(i%3D0%3Bi%3C%3Dy_slices-1%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20for%20(ii%3D0%3Bii%3C%3Dx_slices-1%3Bii%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.write(%22%3Cspan%20id%3D'span%22%2Bspancounter%2B%22'%20class%3D'spanstyle'%3E%3C%2Fspan%3E%22)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20spancounter%2B%2B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20spancounter%3D0%20%0D%0A%7D%20%0D%0A--%3E%20%0D%0A%3C%2Fscript%3E">

<body onload=changeimage()>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程