#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2003
    Posts
    595
    Rep Power
    0

    scroll images right to left


    Hi,

    Is it possible to scroll images right to left using javascript.

    Just like here
    http://www.sntradersonline.com
    instead of text like they are doing, I want to sroll images...

    Thanks
    web developer
  2. #2
  3. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2000
    Posts
    1,058
    Rep Power
    22
    Originally Posted by isheikh
    Hi,

    Is it possible to scroll images right to left using javascript.

    Just like here
    http://www.sntradersonline.com
    instead of text like they are doing, I want to sroll images...

    Thanks
    Possible? Sure.

    Use their code to get started and if you have trouble, come on back and show us what you've got and someone will surely jump in and give you some help.

    Or were you hoping that someone would give you a cut and paste solution?
  4. #3
  5. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there isheikh,

    here is a working example, it may give you some ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>floating clouds</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <base href="http://achelous.mysite.wanadoo-members.co.uk/"/>
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         background: #444;
         margin:0px;
         padding:0px;
     }
    
    #container {
         width: 100%;
         height: 125px;
         position: absolute;
         left: 0%;
         top: 100px;
         overflow: hidden;
         border-top: solid 1px #004;
         border-bottom: solid 1px #004;
     }
    
    #container img {
         position: absolute;
         width: 1400px;
         height:125px;
         border:0px;
     }
    
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
      var i = 0;
      var j=1400
      var speed = 25;
     
    function imgScroll() {
    
         document.getElementById("image0").style.left = i + "px";
         document.getElementById("image1").style.left = j + "px";
          
      i--;
      j--;
    
    if( i< -1399) {
      i = 1400;
     }
    
    if( j< -1399) {
      j = 1400;
     }
     
      scroller=setTimeout("imgScroll()",speed);
    }
    
      onload = imgScroll;
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id = "container">
    
    <img  id="image0" src = "floating_clouds.jpg" alt = ""/>
    <img  id="image1" src = "floating_clouds.jpg" alt = ""/>
    
    </div>
    
    </body>
    </html>
    coothead
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2003
    Posts
    595
    Rep Power
    0
    beautiful ............. thanks a million coothead
    web developer
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    1
    Rep Power
    0

    scrolling images


    i want perfect coding to scroll images in JavaScript from right to left. Coding provided by you is fine even though my code and images are in same folder images are not displaying.
    Last edited by swati16; September 21st, 2012 at 09:22 AM. Reason: detail explanation
  10. #6
  11. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there swati16,

    and a warm welcome to these forums.

    Make sure that you remove this...
    Code:
    <base href="http://achelous.mysite.wanadoo-members.co.uk/"/>
    ...from the "head" section of the document.

    coothead

IMN logo majestic logo threadwatch logo seochat tools logo