Image slider

**louisaivy** · 10-17-2011, 11:48 PM

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?

**vwphillips** · 10-18-2011, 04:17 PM

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>

**louisaivy** · 10-19-2011, 03:58 AM

Thanks

that fixed it!

Thread: Image slider

Thread Tools

Search Thread

Image slider

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

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions