Image scroller issue

Discussion in 'JavaScript' started by Mizl, Mar 10, 2008.

0
  1. #1
    will appreciate the help.

    I have this code that scrolls image from left to right.
    the problem is that it scrolls from the left most part of the page to the right most part

    i want to contain th image within a table preferably at the center, but i want to be able to control the placement of the table and the size of the table.

    Can you include comments to the changes that i will need to make

    THANK

    CODE<begins>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <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>
     
    Mizl, Mar 10, 2008 IP