当前位置：Gxlcms > JavaScript > 3张图片循环组和(很有动感)

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

时间：2021-07-01 10:21:17 帮助过：16人阅读

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

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

<STYLE> 
.spanstyle { 
    LEFT: -5000px; POSITION: absolute 
} 
</STYLE> 
<script> 
<!--  
var imgwidth=468 
var imgheight=120 
var imgurl=new Array() 
imgurl[0]="/files/pic/20050817/200581702204033863.gif" 
imgurl[1]="/files/pic/20050817/200581702204648587.gif" 
imgurl[2]="/files/pic/20050817/200581702204999274.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> 
 
</script>

<body onload=changeimage()>

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

人气教程排行