How to Create a Simple Image Slider in JavaScript.

on



How to Create a Simple Image Slider in JavaScript.

Hi Friends,

In this Article i am going to explain about creating a simple slider in JavaScript . So let us start step by Step tutorial on How to Create a simple image slider in JavaScript .

Before starting this Example you should know the following topics.

1. What is JavaScript Arrays & How to Populate arrays in JavaScript .
2. What is meant by Set Interval and Clear Interval in JavaScript
3. How to change image source dynamically with JavaScript .

If you are not clear about the above mentioned topics, I strongly suggest you to please go through the above mentioned topics first. If you know above topics, let is start the example.

Step 1 :

Create A simple HTML Template as Follows With a Image element with id "myImg" in it .
<![CDATA[
<!DOCTYPE html>
<html>
<head>
                <title></title>
</head>
<body>
                <img src="" id ="myImg">
</body>
</html>
]]>
Step 2 :

Now Add a simple array which contains list of objects with image name as follows

<script type="text/JavaScript">

Var images=[{name:"images/1.jpg"},{name:"images/2.jpg"},{name:"images/3.jpg"},{name:"images/4.jpg"},
{name:"images/5.jpg"},{name:"images/6.jpg"}]
var imgNo=0;
</script>

Step 3 :

Now Let us create a simple function called "startSlide" as follows .

function startSlide(){
                                                document.getElementById("myImg").setAttribute("src",images[imgNo].name);
                                                if(imgNo==5){
                                                                imgNo=0
                                                }
                                                else{
                                                                imgNo++;
                                                }
                                }
 When we invoke the function "startSlide" , it will access the image element with id "myImg" .At this point of time this this element is not having any value for the "src" Attribute . Now we will assign src attribute value as "images[imgNo].name". Sice we have assigned a value for imgNo as 0 , it will assign the first objects name as image src .

 In Result Now the first image will be appear . After that it will come to the if condition to check the image no. If the image no is 5 , it means we have reached to the last image . since we dont have any images after the we will assign imgNo=0. So it will reach to the first image once again .

 Step 4 : Now we have to create a function which will invoke the above startSlide in 1 sec interval . (You can change the interval as per your wish ). So the onload function will look like this .

                window.onload=slide();
                                function slide(){
                                                autoSlide=setInterval(startSlide,1000)
                }

 Step 5 : Now when we run , our Image sliding application is ready and running . we need to do some more things .When we mouse over on the image , sliding has to stop and when we mouse out , sliding has to start once again . To od that we need to add the following code .

                                document.getElementById("myImg").onmouseover=function (){
                                                clearInterval(autoSlide)
                                }

                                document.getElementById("myImg").onmouseout=function (){
                                                slide()
                                }

 So Here is final Code Look Like : 
  <!DOCTYPE html>  
 <html>  
 <head>  
         <title></title>  
         <style type="text/css">  
                 img#myImg {  
   width: 900px;  
   height: 600px;  
 }  
         </style>  
 </head>  
 <body>  
         <img src="" id="myImg">  
         <script type="text/javascript">  
         var autoSlide;  
                 var images=[{name:"images/1.jpg"},{name:"images/2.jpg"},{name:"images/3.jpg"},{name:"images/4.jpg"},{name:"images/5.jpg"},{name:"images/6.jpg"}]  
                 window.onload=slide();  
                 function slide(){  
                         autoSlide=setInterval(startSlide,1000)  
                 }  
                 var imgNo=0;  
                 function startSlide(){  
                         document.getElementById("myImg").setAttribute("src",images[imgNo].name);  
                         if(imgNo==5){  
                                 imgNo=0  
                         }  
                         else{  
                                 imgNo++;  
                         }  
                 }  
                 document.getElementById("myImg").onmouseover=function (){  
                         clearInterval(autoSlide)  
                 }  
                 document.getElementById("myImg").onmouseout=function (){  
                         slide()  
                 }  
         </script>  
 </body>  
 </html>



About Author:
I have come across so many difficult situation while learning JavaScript. I thought I can share my experience in my blog http://sunlineitsolutions.com/  to the people which may be helpful  for them . 

Comments

Post a Comment