Back |
Slide Show 003 |
Yet another way to rotate images. Can be edited to accommodate many images or ad buttons. There is some configuring of images but it is not too difficult. |
Width | Height | Speed | Images |
<div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="15%"> <tr> <td width="100%" bgcolor="#ffffff"> <script language="JavaScript1.2"> var slideshow_width='140px' var slideshow_height='225px' var pause=3000 var dropimages=new Array() dropimages[0]="images/bh1a.jpg" dropimages[1]="images/bh2a.jpg" dropimages[2]="images/bh3a.jpg" var preloadedimages=new Array() for (p=0;p<dropimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=dropimages[p] } var ie4=document.all var dom=document.getElementById if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>') else document.write('<img name="defaultslide" src="'+dropimages[0]+'">') var curpos=parseInt(slideshow_height)*(-1) var degree=10 var curcanvas="canvas0" var curimageindex=0 var nextimageindex=1 function movepic(){ if (curpos<0){ curpos=Math.min(curpos+degree,0) tempobj.style.top=curpos+"px" } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML='<img src="'+dropimages[nextimageindex]+'">' nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0 setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("movepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=dropimages[curimageindex] curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0 } function resetit(what){ curpos=parseInt(slideshow_height)*(-1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.top=curpos+"px" } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<img src="'+dropimages[curimageindex]+'">' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script> </td> </tr> </table> </center> </div> |
Place where needed in the HTML Document.
© Copyright 2009 Ashesh