Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Simple Javascript Slideshow gone wrong

J

jovialnazgul

macrumors newbie
Original poster
Hello I'm hoping someone here could help me, I've been looking everywhere for a simple explanation of how to get my Javascript slideshow
a) working and
b) embedded into a specific cell, probably using an iframe or something but i can figure that out later.

I'm new to JS so if there is an obvious answer please let me know what to fix!
Thanks so much for your help!

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/slideshow/image1.jpg"
var image2=new Image()
image2.src="images/slideshow/image2.jpg"
var image3=new Image()
image3.src="images/slideshow/image3.jpg"
var image4=new Image()
image4.src="images/slideshow/image4.jpg"
var image5=new Image()
image5.src="images/slideshow/image5.jpg"
var image6=new Image()
image6.src="images/slideshow/image6.jpg"
var image7=new Image()
image7.src="images/slideshow/image7.jpg"
var image8=new Image()
image8.src="images/slideshow/image8.jpg"
var image9=new Image()
image9.src="images/slideshow/image9.jpg"
var image10=new Image()
image10.src="images/slideshow/image10.jpg"
//-->
</script>
</head>

<body>

<img src="/images/slideshow/image1.jpg" name="slide" border=0 width="236" height="176"/>
<script>
<!-- var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.src=eval("image"+step+".src")
whichimage=step

if (step<10)
step++
else
step=1

setTimeout("slideit()",2500)
}
slideit()
</script>
</body>
</html>


All it does is display the 1st image. Simple solution, im sure, but if you see it I would appreciate the help very much!
Thanks!
Jovi
 
I reworked your code a bit.
HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Slide Show</title>
<script type="text/javascript">
//<![CDATA[
var imgs = new Array (
  "images/slideshow/image1.jpg",
  "images/slideshow/image2.jpg",
  "images/slideshow/image3.jpg",
  "images/slideshow/image4.jpg",
  "images/slideshow/image5.jpg",
  "images/slideshow/image6.jpg",
  "images/slideshow/image7.jpg",
  "images/slideshow/image8.jpg",
  "images/slideshow/image9.jpg",
  "images/slideshow/image10.jpg"
);
// Preload images
var len = imgs.length-1;
do {
  var i = new Image();
  i.src = imgs[len--];
} while (len > 0);
len = imgs.length;
//]]>
</script>
</head>
<body>
<img src="/images/slideshow/image1.jpg" id="slide" width="236" height="176"/>
<script type="text/javascript">
//<![CDATA[
var step = 0;
function slideit()
{
  document.getElementById('slide').src = imgs[step++];
  if (step >= len) { step = 0; }
  setTimeout(function(){slideit();},2500);
}
slideit();
//]]>
</script>
</body>
</html>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back