Simple Image Rotation in JavaScript

Discussion in 'JavaScript and AJAX' started by pradeep, Jul 15, 2006.

  1. kipfinch

    kipfinch New Member

    Joined:
    Oct 6, 2010
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Can you please give me more details on this. I've been looking for quite a while on a simple javascript to slide a set of images (one at a time) left to right instead of rotating them.

    Any help would be greatly appreciated!
     
  2. delsian

    delsian New Member

    Joined:
    Nov 12, 2010
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Thank you very much for the solution. It works great. Could you please help me to figure out how to use it in case where image comes from CSS? I tried to use an id name but it didn't work..

    I was also interested how to make this script load random image instead of rotation every time the page is visited?

    Thank you.
     
  3. alexharper

    alexharper New Member

    Joined:
    Dec 22, 2010
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Hi Guys

    Can any one tell me how to link to the images when they are in:

    var ImageArr1 = new Array( "pic1.jpg","pic2.jpg","pic3.jpg");

    cheers
     
  4. rameshb

    rameshb New Member

    Joined:
    Dec 10, 2010
    Messages:
    35
    Likes Received:
    1
    Trophy Points:
    0
    Thank you for the post i was searching the same . Thank you for your post
     
  5. LadyAnglesey

    LadyAnglesey New Member

    Joined:
    Nov 14, 2011
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    This works great! Except, I don't need the url goto, just the rotating images. I'm a novice and, try as I might, I can't figure out how to exclude the url function. (When I delete what seems to me the relevant code, my images cease to rotate.) Can any kind, lovely person sort me out? Thanks!
     
  6. GopalGK

    GopalGK New Member

    Joined:
    Dec 27, 2011
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    HTML:
    <body><a id="imageurl" ><img id="Rotating1" border="0"></img></a><script language="JavaScript">     function RotateImages(Start)  {      var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");      var c = new Array("url1", "url2", "url3", "url4");      var b = document.getElementById('Rotating1');      var d = document.getElementById('imageurl');      if(Start>=a.length)          Start=0;      b.src = a[Start];      d.href = c[Start];      window.setTimeout("RotateImages(" + (Start+1) + ")",3000);  }    RotateImages(0);    </script></body>
    I have used the above code to the fullest. It works great.
    I have additionally embedded the rotating images in a table.
    The images are of varying sizes.
    Currently all the images start on the left edge in the table.
    How do I center these images in the table so that they spring out from the table center? I have used additional table code as below.
    HTML:
    </table>
    </div>
    <table border="1" width="350" height="200" align="center" >
    <tr>
      <td>
       <p align=”center”>
    <body>
    ROTATING IMAGE CODE
    HTML:
      
      RotateImages(0);
        </script>
    </body>
    </p>
    </td>
    </tr>
    </table>
    
    Note that <p align=”center”> does not help to center these images in the table.
     
    Last edited by a moderator: Dec 28, 2011
  7. aliens

    aliens New Member

    Joined:
    Feb 3, 2012
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    I'm pretty limited technically, but was able to get the simple java script, shown below, to work (thank you for sharing it, "Phisolophe").

    Now, I'd like to add this functionality -
    If someone clicks on whatever rotating image is being shown at the moment, they will go to a corresponding unique URL that is associated with that image. (like the rotating image on the Yahoo.com home page works).

    Could anyone tell me a simple way to add this function to the script shown below? Thanks!

    <a id="imageurl" ><img id="Rotating1" border="0"></img></a>
    <script language="JavaScript">

    function RotateImages(Start)
    {
    var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");
    var c = new Array("url1", "url2", "url3", "url4");
    var b = document.getElementById('Rotating1');
    var d = document.getElementById('imageurl');
    if(Start>=a.length)
    Start=0;
    b.src = a[Start];
    d.href = c[Start];
    window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
    }

    RotateImages(0);

    </script>
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice