SoFunction
Updated on 2025-03-10

Imitation Flash Advertising Image Rotation Effect with JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Imitation Flash Advertising Picture Rotation Effect-From [Heart]</title>
</head>
<style type="text/css">
<!--
.Image border {
       text-align: center;
       vertical-align: middle;
       padding: 10px;
       border: 3px double #FF0000;

}
#loading {margin-top: 100px;}
#explain {
       font-size:12px;
       color:#00CC00;
       cursor: hand;
}
#img{
       cursor: hand;
       border: 1px solid #BEBEBE;
       padding: 5px;
}
#Box {
       height: 100px;
       width: 100px;
       border: 1px solid #CCCCCC;
}
.span {
       height: 10px;
       width: 200px;
       border: 1px solid #CCCCCC;
       padding: 1px;
}
-->
</style>
<body>
<!--<div >--> 
<span  style="font-size:12px;color:#00FF00"></span><div class="span"><img src="" name="loing" width="1%" height="15"  /></div>
<script language="JavaScript" type="text/javascript" src="jc/poto_link.js"></script>
<script language="JavaScript" type="text/javascript" src="jc/poto_bring.js"></script>
<!--</div>-->
</body>
</html>
[JS part__poto_bring.js]
var filters=new Array()
filters[0]="( duration=0.5,irisStyle=CROSS,motion=out )"//minute X expansion
filters[1]="(duration=0.5,gradientSize=0.25,motion=forward )"//Tail gradient
filters[2]="(duration=0.5,stretchStyle=PUSH )" //Area expansion and contraction
filters[3]="progid:(duration=0.5,bands=30,Direction=left );" //Bars and hundreds of pages
filters[4]="progid:(duration=2);" //Phantom
filters[5]="progid:(duration=0.5,bands=1,slideStyle=SWAP )" //Tull up and down
filters[6]="progid:(duration=1 )"//Bevel rotation
filters[7]="progid:(duration=1 );"//Snowflake dot
filters[8]="progid:(duration=0.5,transition=23 )" //Random
filters[9]="progid:(duration=0.5,motion=out,orientation=vertical );"//Separate left and right
filters[10]="progid:(duration=0.5,squaresX=1,squaresY=30,Direction=right );" //Regional Leaf
filters[11]="progid:( ,enabled=false,duration=0.5,maxSquare=25 )"//Mosaic
filters[12]="progid:(duration=1,wipeStyle=WEDGE )"//Span shape
filters[13]="progid:( duration=1,orientation=vertical )" //Fine-bar segmentation
filters[14]="FILTER: revealTrans(duration=2,transition=20);"//Cape-scroll saw
filters[15]="progid:(duration=0.5,gridSizeX=1,gridSizeY=5 )" //Wipe
filters[16]="progid:(duration=0.5,spokes=16 )" //Span-shaped leaflets
filters[17]="progid:(duration=0.25,gridSizeX=10,gridSizeY=1 )" //Wipe away
filters[18]="progid:(duration=0.5,motion=rightup )" //Beveled jagged
filters[19]="BlendTrans( duration=1 )" //Phantom Gradient
var errors=0
var loads=0
function loading_img(){//Preload image function
for (var i=0;i<;i++){
images[i]=new Image()
images[i].src=imgs[i];
("<img src='"+imgs[i]+"' onerror='err_()' onload='load_()' height='100' style='display:none' />")}
}
function err_(){errors++;}
function load_(){loads++;
="Completed:"+((loads/)*100)+"%";
=""+((loads/)*100)+"%"}
loading_img()
function l_k(){if(i==0){i=1;}open(urls[i-1],"","","")}
function load_img(obj,S){ //Show loading picture
=""
="none"
=explains[S]
//="none"
setTimeout("playes()",p_t);//Execute automatic playback
}
var i
var p_t=6000
function playes(){
if(i>-1)i=0
=filters[i]
(0).apply()
=images[i].src;
(0).play()
=explains[i]
i++
}
function show_(S,W,H,T){//W:Width H:Height T:Time interval
("<div class='image border'>")
("<img src='"+imgs[S]+"' id='img' onClick='l_k()' onerror='=\"\"' onLoad='load_img(this,"+S+")' style='display: none' />")
("<img src='' id='loading' /><br />")
("<span id='explain'  onClick='l_k()'>Loading..</span>")
("</div>")
if(W!=0)=W
if(H!=0)=H
i=S+1
p_t=T
}
show_(4,200,0,3000)
[JS part__poto_link.js]

var images=new Array()//Picture path
var imgs=new Array()//Define preloaded image array
var urls=new Array()//Linking array
var explains=new Array() //Picture description
imgs[0]="images/"
imgs[1]="images/"
imgs[2]="images/"
imgs[3]="images/"
imgs[4]="images/"
imgs[5]="images/"

urls[0]="images/"
urls[1]="images/"
urls[2]="images/"
urls[3]="images/"
urls[4]="images/"
urls[5]="images/"

explains[0]="Picture Exhibition 1"
explains[1]="Picture Exhibition 2"
explains[2]="Picture Exhibition 3"
explains[3]="Picture Exhibition 4"
explains[4]="Picture Exhibition 5"
explains[5]="Picture Exhibition 6"
Package and download