Sunday 9 June 2013

Widgets

How to make slider in JavaScript with equal time Difference.

Demo:-
             



About:- In the previous Article We Learn how Wait time counter in JavaScript And Now in this Article We Learn How to make a simple slider using  JavaScript.You can increase or decrease the time to change the speed of Image in the code.Please just change the images and add your image to the coding.


Coding:-


<html>
<head>
<title>Slider</title>
<script type="text/javascript" language="javascript">
function startslider(imgindex)
{
var arrImages = new Array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');
var arrAlts = new Array('Alt1','Alt2','Alt3','Alt4','Alt5');
var imge = document.getElementById("imgSlider");
imge.src = 'images/' + arrImages[imgindex];
imge.alt = arrAlts[imgindex];
if(imgindex == 4) imgindex = 0;
else imgindex++;
setTimeout('startslider(' + imgindex +')',1000); }
</script>
</head>
<body onload="startslider(0)">
<img src="" alt="" id="imgSlider" style="width:480px;height:220px;border:solid 2px black;"/>
</body>
</html>

0 comments:

Post a Comment