Results 1 to 3 of 3

Thread: Image slider

  1. #1
    Join Date
    Oct 2011
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Image slider

    Hi all

    I am wanting to make the header on my webpage automatically flick through a series of pictures in a loop. I know this is pretty easy with jquery and i wish i was able to use it, but i have a limitation of the fact it must be in javascript, can any one help me with figuring out the best and simplest way to achieve this in javascript?
    Last edited by louisaivy; 10-19-2011 at 04:49 AM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
            <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="slide">
    
    <script type="text/javascript">
    /*<![CDATA[*/
    var slideimages=[//array of images to cycle through
    "http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg",
    "http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg",
    "http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg",
    "http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg"
    ];
    
    for (var img,i=0;i<slideimages.length;i++){
     img=slideimages[i];
     slideimages[i]=new Image();
     slideimages[i].src=img;
    }
    
    var slideshowspeed=1000//speed of slideshow in milliseconds
    var whichimage=0
    
    function slideit(){
     whichimage=++whichimage%slideimages.length;
     document.getElementById('slide').src=slideimages[whichimage].src;
     setTimeout(function(){ slideit(); },slideshowspeed);
    }
    slideit()
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    louisaivy (10-19-2011)

  4. #3
    Join Date
    Oct 2011
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thanks that fixed it!

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •