How to Create a Simple Image Slider in JavaScript.
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.
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 .
<!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://blog.sunlineitsolutions.com/ to the people which may be helpful for them .
Comments