Image slider [Archive] - Dynamic Drive Forums

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

<!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>