A small simple slider example

I want to show here a small example how to make a slider with java script.

First of all you need a host which will keep pictures there. It can be freehost or your self hosting place. Secondly you have to know at least little bit from html and scripting especially javascript. Otherwise you only copy this code and follow instructions to do it.
Why need a host? Because if there is no host server even if you write code and and source is your local machine which is your pc, the result will be like this.

Anyway now how to do it step by step. You need pictures first. More than one picture of course. To make it faster i mean because some technical issues. You need to change format and size of picture or just choose .gif format pictures. Lets make it 3 pictures slider. If you do not know how to change the format or what format is. Just use any picture and later on learn how to change format. Why change it because big size picture can make page load time slower.

Ok if pictures are ready the other issue is where you want to use this slider. Do you have your website or blog. Because both is different issue.
For website, you can directly write codes and load pictures. But blog, you need to upload the pictures somewhere first on net.

Ok now if all done.
First we have to write this. Let me explain what is it first briefly. You written here some variables. If you do not have any clue what it is, no problem. And put this in between head tag. Replace "your picture here" with your picture name whatever its name. If you also do not know it just write click on picture and choose properties. There you go its name and extension there written.

<script type="text/javascript"> <!-- var image1=new Image() image1.src="YOUR FIRST PICTURE NAME.gif" var image2=new Image() image2.src="YOUR SECOND PICTURE NAME.gif" var image3=new Image() image3.src="YOUR THIRD PICTURE NAME.gif" //--> </script>

Second you need to put first image inside body tag and write this java script codes.
What we doing here is we put first picture inside body somewhere and later we write a javascript code with functions to slide it to other pictures.
<img src="YOUR FIRST PICTURE NAME.gif" name="slide" width="80" height="56" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 3.0 seconds setTimeout("slideit()",3000) } slideit() //--> </script>


I hope you liked it. Thanks for reading.