mizl
Programmer
- Mar 10, 2008
- 2
CODE<begins>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Image Scroller</title>
<script type="text/javascript">
var imgURLs = new Array(); //array to store the image urls
/* * PUT YOUR IMAGES HERE * */
imgURLs[0]="1.jpg";
imgURLs[1]="2.jpg";
imgURLs[2]="3.jpg";
imgURLs[3]="4.jpg";
imgURLs[4]="5.jpg";
var imgs = new Array();
var delay = 50; //tume in ms between change of position
var move = 5; //how far does it move at once
var imheight=100;
var i=0;
var wTrack=0;
var go=false;
function init() {
var xDIV=document.getElementById("idiv");
var xTR = document.getElementById("itr");
var xTD = document.createElement("TD");
var xIMG = document.createElement("IMG");
xTD.appendChild(xIMG);
xTR.appendChild(xTD);
xTD.id="xtd"+i;
xTD.setAttribute("id", "xtd"+i);
xIMG.src = imgURLs[i%imgURLs.length];
xIMG.height = imheight;
i++;
wTrack+=xIMG.width;
if(wTrack<2*screen.width || i%imgURLs.length>0) setTimeout("init()", 100);
else go=true;
}
function scroll() {
if(go) {
var xDIV=document.getElementById("idiv");
var xTR=document.getElementById("itr");
if(xDIV.offsetLeft<-xTR.firstChild.offsetWidth) {
xDIV.style.left=(xDIV.style.left.substring(0, xDIV.style.left.indexOf("p"))-0+xTR.firstChild.offsetWidth)+"px";
var tmpChild = xTR.firstChild;
xTR.removeChild(xTR.firstChild);
xTR.appendChild(tmpChild);
}
xDIV.style.left=(xDIV.style.left.substring(0, xDIV.style.left.indexOf("p"))-move)+"px";
}
setTimeout("scroll()", delay);
}
function preloadImages() {
for(var i=0; i<imgURLs.length; i++) {
imgs=new Image();
imgs.src=imgURLs;
}
}
preloadImages();
</script>
</head>
<body onload="init();scroll()">
<div>
<div id='idiv' style='position:absolute;top:100px;left:100px;right:-100px'>
<table id='itbl' cellspacing=0 cellpadding=0>
<tr id='itr'></tr>
</table>
</div>
</div>
<div id='main' style='position:absolute;top:220px;left:10px'>
<p>This is the div inside which the rest of your content can go</p>
</div>
</body>
</html>
CODE<ends>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Image Scroller</title>
<script type="text/javascript">
var imgURLs = new Array(); //array to store the image urls
/* * PUT YOUR IMAGES HERE * */
imgURLs[0]="1.jpg";
imgURLs[1]="2.jpg";
imgURLs[2]="3.jpg";
imgURLs[3]="4.jpg";
imgURLs[4]="5.jpg";
var imgs = new Array();
var delay = 50; //tume in ms between change of position
var move = 5; //how far does it move at once
var imheight=100;
var i=0;
var wTrack=0;
var go=false;
function init() {
var xDIV=document.getElementById("idiv");
var xTR = document.getElementById("itr");
var xTD = document.createElement("TD");
var xIMG = document.createElement("IMG");
xTD.appendChild(xIMG);
xTR.appendChild(xTD);
xTD.id="xtd"+i;
xTD.setAttribute("id", "xtd"+i);
xIMG.src = imgURLs[i%imgURLs.length];
xIMG.height = imheight;
i++;
wTrack+=xIMG.width;
if(wTrack<2*screen.width || i%imgURLs.length>0) setTimeout("init()", 100);
else go=true;
}
function scroll() {
if(go) {
var xDIV=document.getElementById("idiv");
var xTR=document.getElementById("itr");
if(xDIV.offsetLeft<-xTR.firstChild.offsetWidth) {
xDIV.style.left=(xDIV.style.left.substring(0, xDIV.style.left.indexOf("p"))-0+xTR.firstChild.offsetWidth)+"px";
var tmpChild = xTR.firstChild;
xTR.removeChild(xTR.firstChild);
xTR.appendChild(tmpChild);
}
xDIV.style.left=(xDIV.style.left.substring(0, xDIV.style.left.indexOf("p"))-move)+"px";
}
setTimeout("scroll()", delay);
}
function preloadImages() {
for(var i=0; i<imgURLs.length; i++) {
imgs=new Image();
imgs.src=imgURLs;
}
}
preloadImages();
</script>
</head>
<body onload="init();scroll()">
<div>
<div id='idiv' style='position:absolute;top:100px;left:100px;right:-100px'>
<table id='itbl' cellspacing=0 cellpadding=0>
<tr id='itr'></tr>
</table>
</div>
</div>
<div id='main' style='position:absolute;top:220px;left:10px'>
<p>This is the div inside which the rest of your content can go</p>
</div>
</body>
</html>
CODE<ends>