Simple Slideshow (I know I know) [Solved]

[dibigid]

So I'm new the whole javascript scene and I'm in the process of trying to make the simplest slideshow. All I want it to do is display an image, wait a couple seconds, then show the next image. I don't even want any fade or anything!What I have right now:

<script type="text/javascript">var slideshow=new Array();var i=0;slideshow[0]="<img src=\"basket60.jpg\">";slideshow[1]="<img src=\"golf60.jpg\">";slideshow[2]="<img src=\"football33.jpg\">";slideshow[3]="<img src=\"base60.jpg\">";while (i<4){	document.writeln(slideshow[i]);	i++;}</script>

When I test this in a browser it just displays one image after another. What I'm thinking (and this is where any help is appreciated) is I need to maybe put the "while" into a function. Then I'll have some sort of jQuery type thing execute the function and then maybe use the "hide" feature of jQuery before switching to the next picture? But I'm unsure on the syntax of any of that.Thanks in advance, I know this topic has been discussed extensively, but people on the forums said that a good way to improve your javascript skill is to build a slideshow from scratch, and I'm trying!

[justsomeguy]

You don't need jQuery for this, if you want to learn how to do this stuff it's best to not use something that does it for you.It would probably be easiest to have one img element on the page, and only store the image URLs in your array. To change the image, you target the img element on the page and change the src attribute to the next URL in the array. This would be an example of doing it that way using the same techniques as your script:

<img id="the_image"><script type="text/javascript">var slideshow=new Array();var i=0;slideshow[0]="basket60.jpg";slideshow[1]="golf60.jpg";slideshow[2]="football33.jpg";slideshow[3]="base60.jpg";while (i<4){  document.getElementById('the_image').setAttribute('src', slideshow[i]);  i++;}</script>

That way you don't have to show and hide anything, you just change the existing element to something else.As far as the code not doing everything immediately, for that you need to use setTimeout or setInterval. You use those to run a piece of code after a certain length of time. So, it would make sense to have a function which changes the image. It should use the global counter to keep track of which image to show, and if the counter is at the end it should start over from the beginning again. That may look something like this, I'll use the shorthand way to define your array also, and variable names that aren't likely to conflict with other scripts:

var slideshow_image_list = [  "basket60.jpg",  "golf60.jpg",  "football33.jpg",  "base60.jpg"];var slideshow_image_index = 0;function change_slideshow_image(){  if (slideshow_image_index >= slideshow_image_list.length)	slideshow_image_index = 0; // reset to start  document.getElementById('the_image').setAttribute('src', slideshow_image_list[slideshow_image_index]);  slideshow_image_index++;}

Now you can call that function whenever you want the image to change, e.g.:

for (var i = 0; i < 4; i++){  change_slideshow_image();}

That will run the function 4 times, and each time it will change the image. To run that function on a schedule, you can use setInterval. You pass setInterval the function you want to run, and how often to run it in milliseconds. So this will run the function every 5 seconds:

setInterval(change_slideshow_image, 5000);

So, all together, it looks like this:

var slideshow_image_list = [  "basket60.jpg",  "golf60.jpg",  "football33.jpg",  "base60.jpg"];var slideshow_image_index = 0;function change_slideshow_image(){  if (slideshow_image_index >= slideshow_image_list.length)	slideshow_image_index = 0; // reset to start  document.getElementById('the_image').setAttribute('src', slideshow_image_list[slideshow_image_index]);  slideshow_image_index++;}change_slideshow_image(); // run it immediately to start it offsetInterval(change_slideshow_image, 5000); // schedule it to run every 5 seconds

If you look up the references for setInterval or setTimeout you'll see there are other things you can do, you can stop it from running the next time for example (a pause button). You can also send the function a parameter to tell it which direction to go, so you could add links to view the next and previous images and use the same function to check the direction and either decrement or increment the counter.

[dibigid]

Wow!Thank you so much, this works absolutely great and it actually makes sense :)It was great to get such a thorough reply, you sir are an excellent person.