Good afternoon,
I have on my page 2 div's with different contents and 1 script (.js) manipulating the contents of both div's. I want the manipulation in the second div starts exactly 15 seconds after it started in the first div. How can I achieve this ? I've found nothing in various FAQ's.
Thanl you for any help.
Friendly regards
Pierre
setTimeout is simplest
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<div id="div1" ></div>
<div id="div2" ></div>
<input type="button" name="" value="Test" onclick="Test(15*1000);" />
<script type="text/javascript">
function Test(ms){
document.getElementById('div1').innerHTML='DIV 1';
clearTimeout(Test.to); // the timeout is assigned to the property of function Test.to to allow it to be cancelled
Test.to=setTimeout(function(){ document.getElementById('div2').innerHTML='DIV 2'; },ms);
}
</script></body>
</html>
Good evening Vic,
Thank you for your piece of code, which is simplest indeed ans works perfectly, but in the conditions of using my "bidouille" I'm not able to click on any button. The insertion of a delay should be automatic. May I just insert the function Test(15*1000) into the <body> tag ?
In addition I don't want my coding to display "DIV 1" and then "DIV 2" but to run sort of a scrolling slideshow on the screen. In don't see where I should insert the normal contents of my actual DIV's 1 and 2.
Thank you in advance.
(Please don't forget I'm a dummy on js !)
Best regards
Pierre
the function can be called just before the </BODY> tag
or <body onload="Test(15*1000);">
if you can supply more detail on the scrolling slideshow I should be able with that
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<div id="div1" ></div>
<div id="div2" ></div>
<script type="text/javascript">
function Test(ms){
document.getElementById('div1').innerHTML='DIV 1';
clearTimeout(Test.to); // the timeout is assigned to the property of function Test.to to allow it to be cancelled
Test.to=setTimeout(function(){ document.getElementById('div2').innerHTML='DIV 2'; },ms);
}
Test(15*1000);
</script>
</body>
</html>
</body>
</html>
Thank you Vic,
I wasn't able to visit this thread for some time.I'll study your last code and see how I can supply you more details.
Grateful for helping me
Pierre
Good evening Vic,
You're right, you can't figure what I'm looking for without a more accurate description. It's a bit complicated.
I've found on the web a scrolling slideshow and I adapted it to my needs as well as possible without a real knowledge of Javascript.
1. The pictures in my slidechow are actually scans of fragments of a sheet music.
2. I have transformed the original slideshow to a double one, with one series of pictures in the above half of the screen and another series in the below half.
3. For now, it works rather well, except that the above and below pictures change (scroll) simultaneously and it doesn't help me.
4. My aim is to have a screen displaying in the above half the #1 fragment of a musical piece and the #2 fragment in the lower half, but the trick is that when I have played the #1 fragment, the #2 must still be displayed in the lower half in order to enable me to continue playing, and while I'm playing what appears in the lower half, the above contents must be replaced by #3 fragment. And so on: when I finish playing the # 2 fragment below, I continue with the #3 above and at that time the below half contents must change in order to display fragment #4. For that reason I want to know how the lower slideshow can begin running later as the above one.
In addition, I manage to have my notes enlarged in comparison with the printed sheetmusic. Perhaps you'll say that there are such softwares on the web or that I can enlarge my notes on paper. In fact the only fitting software costs about 4000 $; on the other hand if I enlarge my sheetmusic I have to turn pages twice as often as in the original size and often at impossible places since I need my two hands when I'm playing. That's why I try to make my own computerized solution.
Hoping that these details arn't going to discourage you !
Thank you for your attention.
Pierre
If this is similar to your requirement
I will modify it as required
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#slider {
position:absolute;left:50px;top:50px;width:700px;height:200px;border:solid red 1px;
}
#slider2 {
position:absolute;left:50px;top:350px;width:700px;height:200px;border:solid red 1px;
}
.page {
position:absolute;left:0px;top:0px;width:700px;height:200px;border:solid red 1px;
}
/*]]>*/
</style>
</head>
<body>
<div id="slider" class="slider" >
<img class="page" src="http://www.vicsjavascripts.org/StdImages/0.gif" />
<img class="page" src="http://www.vicsjavascripts.org/StdImages/2.gif" />
<img class="page" src="http://www.vicsjavascripts.org/StdImages/4.gif" />
</div>
<div id="slider2" class="slider" >
<img class="page" src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img class="page" src="http://www.vicsjavascripts.org/StdImages/3.gif" />
<img class="page" src="http://www.vicsjavascripts.org/StdImages/5.gif" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcImageSlider={
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud);
}
},
Auto:function(id,ms){
var oop=this,o=oop['zxc'+id],ms;
if (o){
o.to=setTimeout(function(){ oop.rotate(o,o.n+o.ud,true); },typeof(ms)=='number'&&ms>=0?ms:200);
}
},
Pause:function(o){
var oop=this;
if (o){
o.auto=false;
clearTimeout(o.to);
}
},
Init:function(o){
var id=o.ParentID,p=document.getElementById(id),ms=o.Animate,hld=o.AutoHold,s=o.AuoStart,imgs=p?p.getElementsByTagName('IMG'):[];
if (imgs[2]){
var w=p.offsetWidth,h=p.offsetHeight,z0=0;
p.style.overflow='hidden';
o.a=[];
for (var z0=0;z0<imgs.length;z0++){
imgs[z0].style.position='absolute';
imgs[z0].style.zIndex='0';
imgs[z0].style.visibility='visible';
imgs[z0].style.left=(z0!=0?w:0)+'px';
imgs[z0].style.top='0px';
imgs[z0].style.width=w+'px';
imgs[z0].style.height=h+'px';
o.a[z0]=[imgs[z0],'left'];
}
o.id=id;
o.sz=w;
o.n=0;
o.l=z0-1;
o.ud=1;
o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
o.h=typeof(h)=='number'&&hld>0?hld:o.ms*4;
o.oc=o.OnComplete;
this['zxc'+id]=o;
typeof(s)=='number'&&s>=0?this.Auto(id,s):null;
}
},
rotate:function(o,n,a){
this.Pause(o);
o.a[o.n][0].style.zIndex='0';
o.auto=a===true;
n=n<0?o.l:n>o.l?0:n;
o.a[n][0].style.zIndex='1';
o.a[n][0].style.visibility='visible';
o.a[n][0].style.left=o.sz*o.ud+'px';
this.animate(o,o.a[n],o.sz,0,new Date(),o.ms);
o.n=n;
},
animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[0].style[a[1]]=n+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[0].style[a[1]]=t+'px';
for (var z0=0;z0<=o.l;z0++){
o.a[z0][0].style.visibility=o.n!=z0?'hidden':'visible';
}
o.auto?oop.Auto(o.id,o.h):null;
typeof(o.oc)=='function'?o.oc():null;
}
}
}
zxcImageSlider.Init({
ParentID:'slider', // the unique ID of the parent DIV. (string)
Animate:1000, //(optional) the slide duration in mill-sec. (number, default)
// AutoHold:4000, //(optional) the auto rotate delay in mill-sec. (number, animate*4)
// AuoStart:2000 //(optional) the auto rotate start delay in mill-sec. (number, no auto start)
OnComplete:function(){
setTimeout(function(){ zxcImageSlider.Next('slider2',1); },10*100);
}
});
zxcImageSlider.Init({
ParentID:'slider2',
Animate:1000,
OnComplete:function(){
setTimeout(function(){ zxcImageSlider.Next('slider',1); },10*100);
}
});
zxcImageSlider.Next('slider',1);
/*]]>*/
</script>
</body>
</html>
Good morning Vic,
My English is probably even more bad than I thought. I wrote that "For now, it (my small App) works rather well, except that the above and below pictures change (scroll) simultaneously and it doesn't help me."
I asked only a small correction in order to have my pictures change one at a time and not at the same time, but you have re-made the whole thing from scratch. It makes me feel very unconfortable thinking of the amount of time you spent on it. As a proof, I attach the .js file containing one of two scripts I found on the web and adapted to my needs (by making a second .js for the second <div>):
Wasn't it more simple to add a couple of lines to existing code ?Code:/*
Pausing Scroller from Dynamic Web Coding at dyn-web.com
Copyright 2001-2013 by Sharon Paine
For demos, documentation and updates, visit http://www.dyn-web.com/code/scrollers/
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see http://www.gnu.org/licenses
*/
// DYN_WEB is namespace used for code from dyn-web.com
// replacing previous use of dw_ prefix for object names
var DYN_WEB = DYN_WEB || {};
/*
dw_event.js - basic event handling file from dyn-web.com
version date May 2013 (added .domReady)
.domReady uses whenReady fn from JavaScript the Definitive Guide
6th edition by David Flanagan, example 17.01
*/
DYN_WEB.Event=(function(Ev){Ev.add=document.addEventListener?function(obj,etype,fp,cap){cap=cap||false;obj.addEventListener(etype,fp,cap);}:function(obj,etype,fp){obj.attachEvent('on'+etype,fp);};Ev.remove=document.removeEventListener?function(obj,etype,fp,cap){cap=cap||false;obj.removeEventListener(etype,fp,cap);}:function(obj,etype,fp){obj.detachEvent('on'+etype,fp);};Ev.DOMit=function(e){e=e?e:window.event;if(!e.target){e.target=e.srcElement;}if(!e.preventDefault){e.preventDefault=function(){e.returnValue=false;return false;};}if(!e.stopPropagation){e.stopPropagation=function(){e.cancelBubble=true;};}return e;};Ev.getTarget=function(e){e=Ev.DOMit(e);var tgt=e.target;if(tgt.nodeType!==1){tgt=tgt.parentNode;}return tgt;};Ev.domReady=(function(){var funcs=[];var ready=false;function handler(e){if(ready){return;}if(e.type==="readystatechange"&&document.readyState!=="complete"){return;}for(var i=0,len=funcs.length;i<len;i++){funcs[i].call(document);}ready=true;funcs=[];}if(document.addEventListener){document.addEventListener("DOMContentLoaded",handler,false);document.addEventListener("readystatechange",handler,false);window.addEventListener("load",handler,false);}else if(document.attachEvent){document.attachEvent("onreadystatechange",handler);window.attachEvent("onload",handler);}return function whenReady(f){if(ready){f.call(document);}else{funcs.push(f);}};})();return Ev;})(DYN_WEB.Event||{});
DYN_WEB.Util=(function(Ut){var Ev=DYN_WEB.Event;Ut.$=function(id){return document.getElementById(id);};Ut.augment=function(Obj1,Obj2){var prop;for(prop in Obj2){if(Obj2.hasOwnProperty(prop)&&!Obj1[prop]){Obj1[prop]=Obj2[prop];}}};Ut.contained=function(oNode,oCont){if(!oNode){return false;}while((oNode=oNode.parentNode)){if(oNode===oCont){return true;}}return false;};Ut.mouseleave=function(e,oNode){e=Ev.DOMit(e);var toEl=e.relatedTarget?e.relatedTarget:e.toElement?e.toElement:null;if(oNode!==toEl&&!Ut.contained(toEl,oNode)){return true;}return false;};Ut.getLayerOffsets=function(el,oCont){var left=0,top=0;if(Ut.contained(el,oCont)){do{left+=el.offsetLeft;top+=el.offsetTop;}while(((el=el.offsetParent)!==oCont));}return{x:left,y:top};};return Ut;})(DYN_WEB.Util||{});
DYN_WEB.Scroll_Div=(function(){var Ut=DYN_WEB.Util;function SDiv(wnId,lyrId){this.id=wnId;SDiv.col[this.id]=this;SDiv.ids[SDiv.ids.length]=this.id;this.load(lyrId);}SDiv.col={};SDiv.ids=[];SDiv.isSupported=function(){return!!(document.getElementById&&(document.addEventListener||document.attachEvent));};SDiv.prototype={load:function(lyrId){var lyr;if(this.lyrId){lyr=Ut.$(this.lyrId);lyr.style.visibility="hidden";}this.lyr=lyr=Ut.$(lyrId);this.lyr.style.position='absolute';this.lyrId=lyrId;this.y=0;this.x=0;this.shiftTo(0,0);this.getDims();lyr.style.visibility="visible";this.ready=true;this.on_load();},shiftTo:function(x,y){if(this.lyr&&!isNaN(x)&&!isNaN(y)){this.x=x;this.y=y;this.lyr.style.left=Math.round(x)+"px";this.lyr.style.top=Math.round(y)+"px";}},getDims:function(){var wndo=Ut.$(this.id);var lyr=Ut.$(this.lyrId);this.lyrWd=lyr.offsetWidth;this.lyrHt=lyr.offsetHeight;this.wnWd=wndo.offsetWidth;this.wnHt=wndo.offsetHeight;var w=this.lyrWd-this.wnWd;var h=this.lyrHt-this.wnHt;this.maxX=(w>0)?w:0;this.maxY=(h>0)?h:0;},on_load:function(){},on_scroll:function(){},on_scroll_start:function(){},on_scroll_stop:function(){},on_scroll_end:function(){},clearTimer:function(){clearInterval(this.timerId);this.timerId=0;}};return SDiv;})();
(function(){var Ut=DYN_WEB.Util,SDiv=DYN_WEB.Scroll_Div;SDiv.defaultSlideDur=500;var Glide_Scroll={initScrollByVals:function(dx,dy,dur){if(!this.ready||this.sliding){return;}this.startX=this.x;this.startY=this.y;this.destX=this.destY=this.distX=this.distY=0;if(dy<0){this.distY=(this.startY+dy>=-this.maxY)?dy:-(this.startY+this.maxY);}else if(dy>0){this.distY=(this.startY+dy<=0)?dy:-this.startY;}if(dx<0){this.distX=(this.startX+dx>=-this.maxX)?dx:-(this.startX+this.maxX);}else if(dx>0){this.distX=(this.startX+dx<=0)?dx:-this.startX;}this.destX=this.startX+this.distX;this.destY=this.startY+this.distY;this.glideScrollPrep(this.destX,this.destY,dur);},initScrollToVals:function(destX,destY,dur){if(!this.ready||this.sliding){return;}this.startX=this.x;this.startY=this.y;this.destX=-Math.max(Math.min(destX,this.maxX),0);this.destY=-Math.max(Math.min(destY,this.maxY),0);this.distY=this.destY-this.startY;this.distX=this.destX-this.startX;if(dur===0){this.on_scroll_start(this.startX,this.startY);this._jumpTo(this.destX,this.destY);}else{this.glideScrollPrep(this.destX,this.destY,dur);}},_jumpTo:function(x,y){this.shiftTo(x,y);this.on_scroll(x,y);},glideScrollPrep:function(destX,destY,dur){this.slideDur=(typeof dur==='number')?dur:SDiv.defaultSlideDur;this.per=Math.PI/(2*this.slideDur);this.sliding=true;this.lyr=Ut.$(this.lyrId);this.startTime=new Date().getTime();var self=this;self.timerId=setInterval(function(){self.doGlideScroll();},10);this.on_scroll_start(this.startX,this.startY);},doGlideScroll:function(){var elapsed=new Date().getTime()-this.startTime;if(elapsed<this.slideDur){var x=this.startX+(this.distX*Math.sin(this.per*elapsed));var y=this.startY+(this.distY*Math.sin(this.per*elapsed));this.shiftTo(x,y);this.on_scroll(x,y);}else{this.clearTimer();this.sliding=false;this.shiftTo(this.destX,this.destY);this.on_scroll(this.destX,this.destY);this.on_scroll_stop(this.destX,this.destY);if(this.distX&&(this.destX===0||this.destX===-this.maxX)||this.distY&&(this.destY===0||this.destY===-this.maxY)){this.on_scroll_end(this.destX,this.destY);}}}};Ut.augment(SDiv.prototype,Glide_Scroll);})();
(function(){var Ev=DYN_WEB.Event,Ut=DYN_WEB.Util,SDiv=DYN_WEB.Scroll_Div;var Pause_Auto_Scroll={makePauseAuto:function(opts){var axis=opts.axis||'h',wn=Ut.$(this.id),self=this;if(axis==='v'){this.dy=opts.distance;this.dx=0;}else{this.dx=opts.distance;this.dy=0;}this.dur=opts.dur||SDiv.defaultSlideDur;this.startDelay=opts.startDelay||500;this.pauseDelay=opts.pauseDelay||3000;this.resumeDelay=opts.resumeDelay||300;if(opts.bRepeat&&opts.repeatId){var pos=Ut.getLayerOffsets(Ut.$(opts.repeatId),Ut.$(this.id));if(pos.x||pos.y){this.on_scroll=function(){var backToStart;if(axis==='v'&&Math.round(this.y)<=-pos.y){backToStart=true;}else if(axis==='h'&&Math.round(this.x)<=-pos.x){backToStart=true;}if(backToStart){this.shiftTo(0,0);}};}}if(opts.bPauseResume){Ev.add(wn,'mouseover',function(){self.pauseAutoScroll();});Ev.add(wn,'mouseout',function(e){self.checkMouseout(e,self.id);});}self.pTimer=setTimeout(function(){self.doAutoScroll();},self.startDelay);},doAutoScroll:function(){var self=this;this.clearPauseTimer();this.initScrollByVals(-this.dx,-this.dy,this.dur);self.pTimer=setTimeout(function(){self.doAutoScroll();},self.pauseDelay);},pauseAutoScroll:function(){this.clearPauseTimer();},clearPauseTimer:function(){clearTimeout(this.pTimer);this.pTimer=null;},checkMouseout:function(e,wnId){var self=SDiv.col[wnId];if(Ut.mouseleave(e,Ut.$(wnId))){self.pTimer=setTimeout(function(){self.doAutoScroll();},self.resumeDelay);}}};Ut.augment(SDiv.prototype,Pause_Auto_Scroll);})();
Thank you anyhow Vic .
Have a fine day.
Pierre
Good morning again Vic,
I tried to adjust your code to my needs.
First question: why do your code run very well in my HTML editor (Webexpert 6) and not at all in Mozilla Firefox (my project is an offline html app) ?
I replaced your .gif by my musical fragments .jpg and it still runs in Webexpert but not in Firefox.
Each new picture should't hide the preceding one but the preceding one should slide out of the screen (to the left) and the new one follow it immediately (so does the .js file I sent you this morning).
The speed of the slide movement is too fast (I was able to slow it down by myself by changing one ms parameter).
Each picture must stay on the screen 15 seconds in order to enable me to play it before it slides out of sight. In addition I need to know which parameter changes the duration of each picture because each piece of music gets its own tempo = playing speed (in that case I wasn't able to find which parameter had to be modified).
I thank you very much again and I'm sorry that you have so much to work with my project.
Best regards
Pierre
useQuote:
Each picture must stay on the screen 15 seconds in order to enable me to play it before it slides out of sight. In addition I need to know which parameter changes the duration
each slider can be controlled separately with different slide and hold durationsCode:AutoHold:, //(optional) the auto rotate delay in mill-sec. (number, animate*4)
Code:
15*1000
I an not sure how you wish the two sliders to interact
modified code with in/out rather than overlay
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#slider {
position:relative;left:50px;top:0px;width:700px;height:200px;border:solid red 1px;
}
#slider2 {
position:relative;left:50px;top:0px;width:700px;height:200px;border:solid red 1px;
}
.page {
position:absolute;left:0px;top:0px;width:700px;height:200px;border:solid red 1px;
}
/*]]>*/
</style>
</head>
<body>
<input type="button" name="" value="Next" onclick="zxcImageSlider.Next('slider',1);" />
<input type="button" name="" value="Back" onclick="zxcImageSlider.Next('slider',-1);" />
<input type="button" name="" value="Auto" onclick="zxcImageSlider.Auto('slider');" />
<input type="button" name="" value="Pause" onclick="zxcImageSlider.Pause('slider');" />
<input type="button" name="" value="GoTo 0" onclick="zxcImageSlider.GoTo('slider',0);" />
<input type="button" name="" value="GoTo 2" onclick="zxcImageSlider.GoTo('slider',1);" />
<input type="button" name="" value="GoTo 4" onclick="zxcImageSlider.GoTo('slider',2);" />
<div id="slider" class="slider" >
<img class="page" src="http://www.vicsjavascripts.org/StdImages/0.gif" />
<img class="page" src="http://www.vicsjavascripts.org/StdImages/2.gif" />
<img class="page" src="http://www.vicsjavascripts.org/StdImages/4.gif" />
</div>
<br />
<br />
<input type="button" name="" value="Next" onclick="zxcImageSlider.Next('slider2',1);" />
<input type="button" name="" value="Back" onclick="zxcImageSlider.Next('slider2',-1);" />
<input type="button" name="" value="Auto" onclick="zxcImageSlider.Auto('slider2');" />
<input type="button" name="" value="Pause" onclick="zxcImageSlider.Pause('slider2');" />
<input type="button" name="" value="GoTo 1" onclick="zxcImageSlider.GoTo('slider2',0);" />
<input type="button" name="" value="GoTo 3" onclick="zxcImageSlider.GoTo('slider2',1);" />
<input type="button" name="" value="GoTo 5" onclick="zxcImageSlider.GoTo('slider2',2);" />
<div id="slider2" class="slider" >
<img class="page" src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img class="page" src="http://www.vicsjavascripts.org/StdImages/3.gif" />
<img class="page" src="http://www.vicsjavascripts.org/StdImages/5.gif" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcImageSlider={
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud);
}
},
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(o.id);
if (o.a[n]&&o.n!=n){
o.ud=n<o.n?-1:1;
this.rotate(o,n);
}
}
},
Auto:function(id,ms){
var oop=this,o=oop['zxc'+id],ms;
if (o){
o.to=setTimeout(function(){ oop.rotate(o,o.n+o.ud,true); },typeof(ms)=='number'&&ms>=0?ms:200);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
o.auto=false;
clearTimeout(o.to);
}
},
Init:function(o){
var id=o.ParentID,p=document.getElementById(id),ms=o.Animate,hld=o.AutoHold,s=o.AuoStart,imgs=p?p.getElementsByTagName('IMG'):[];
if (imgs[2]){
var w=p.offsetWidth,h=p.offsetHeight,z0=0;
p.style.overflow='hidden';
o.a=[];
for (var z0=0;z0<imgs.length;z0++){
imgs[z0].style.position='absolute';
imgs[z0].style.zIndex='0';
imgs[z0].style.visibility='visible';
imgs[z0].style.left=(z0!=0?w:0)+'px';
imgs[z0].style.top='0px';
imgs[z0].style.width=w+'px';
imgs[z0].style.height=h+'px';
o.a[z0]=[imgs[z0],'left'];
}
o.id=id;
o.sz=w;
o.n=0;
o.l=z0-1;
o.ud=1;
o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
o.h=typeof(h)=='number'&&hld>0?hld:o.ms*4;
o.oc=o.OnComplete;
this['zxc'+id]=o;
typeof(s)=='number'&&s>=0?this.Auto(id,s):null;
}
},
rotate:function(o,n,a){
this.Pause(o.id);
o.auto=a===true;
n=n<0?o.l:n>o.l?0:n;
o.a[n][0].style.left=o.sz*o.ud+'px';
this.animate(o,o.a[o.n],0,-o.sz*o.ud,new Date(),o.ms);
this.animate(o,o.a[n],o.sz*o.ud,0,new Date(),o.ms,true);
o.n=n;
},
animate:function(o,a,f,t,srt,mS,x){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[0].style[a[1]]=n+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
}
else {
a[0].style[a[1]]=t+'px';
x&&o.auto?oop.Auto(o.id,o.h):null;
typeof(o.oc)=='function'?o.oc():null;
}
}
}
zxcImageSlider.Init({
ParentID:'slider', // the unique ID of the parent DIV. (string)
Animate:1000, //(optional) the slide duration in mill-sec. (number, default)
AutoHold:2*1000, //(optional) the auto rotate delay in mill-sec. (number, animate*4)
// AuoStart:2000, //(optional) the auto rotate start delay in mill-sec. (number, no auto start)
OnComplete:function(){
// setTimeout(function(){ zxcImageSlider.Next('slider2',1); },10*100);
}
});
zxcImageSlider.Init({
ParentID:'slider2',
Animate:1000,
AutoHold:15*1000,
// AuoStart:2000,
OnComplete:function(){
// setTimeout(function(){ zxcImageSlider.Next('slider',1); },10*100);
}
});
//zxcImageSlider.Next('slider',1);
/*]]>*/
</script>
</body>
</html>