This tutorial will discuss how to design a slider for your website using java script without JQuery.
You have seen many websites that have different moving images at their header these moving images are called slider. I will discuss how to make a slider for your website by simply using java script.
Prerequisite:
1. You must have basic understanding of HTML.
2. Basic java script understanding and functions in java script.
3. You must practice of different text editors like Notepad, Textpade, Notepad++, Dreamviewer etc.
Steps:
1. Open a new document by pressing ctrl+N in any text editor i will use NotePad++ for this toutorial.
2.Paste the following code in the text Editor.
<html>
<head><title>java script slider</title>
<script type="text/javascript" language='javascript'>
function show()
{
document.getElementById('imgmain').src="images.jpg";
document.getElementById('img2').src="circle.jpg";
document.getElementById('img3').src="circle.jpg";
document.getElementById('img4').src="circle.jpg";
document.getElementById('img5').src="circle.jpg";
document.getElementById('img1').src="fillcircle.jpg";
setTimeout("show1()",2000);
}
function show1()
{
document.getElementById('imgmain').src="second.jpg";
document.getElementById('img1').src="circle.jpg";
document.getElementById('img3').src="circle.jpg";
document.getElementById('img4').src="circle.jpg";
document.getElementById('img5').src="circle.jpg";
document.getElementById('img2').src="fillcircle.jpg";
setTimeout("show2()",2000);
}
function show2()
{
document.getElementById('imgmain').src="third.jpg";
document.getElementById('img3').src="fillcircle.jpg";
document.getElementById('img1').src="circle.jpg";
document.getElementById('img2').src="circle.jpg";
document.getElementById('img4').src="circle.jpg";
document.getElementById('img5').src="circle.jpg";
setTimeout("show3()",2000);
}
function show3()
{
document.getElementById('imgmain').src="fourth.jpg";
document.getElementById('img4').src="fillcircle.jpg";
document.getElementById('img1').src="circle.jpg";
document.getElementById('img2').src="circle.jpg";
document.getElementById('img3').src="circle.jpg";
document.getElementById('img5').src="circle.jpg";
setTimeout("show4()",2000);
}
function show4()
{
document.getElementById('imgmain').src="fifth.jpg";
document.getElementById('img5').src="fillcircle.jpg";
document.getElementById('img1').src="circle.jpg";
document.getElementById('img2').src="circle.jpg";
document.getElementById('img3').src="circle.jpg";
document.getElementById('img4').src="circle.jpg";
setTimeout("show()",2000);
}
</script>
</head>
<body onload="show()">
<div align="center">
<img id="imgmain" style="align:center; border: medium solid #CC99FF; height: 180px; width: 499px" src="images.jpg" /></br></div>
<div id="circle" align="center" style="">
<img id="img1" src="fillcircle.jpg" style="height: 17px; width: 21px" />
<img id="img2" src="circle.jpg" style="height: 17px; width: 21px" />
<img id="img3" src="circle.jpg" style="height: 17px; width: 21px" />
<img id="img4" src="circle.jpg" style="height: 17px; width: 21px" />
<img id="img5" src="circle.jpg" style="height: 17px; width: 21px" />
</div>
</body>
</html>
3.you can use your own images for your slider
4.Your Slider will look Like this.
Thanks sir for the knowledge full postss...Please Sir carry on....Stay Bless By the Grace oF Allah
ReplyDelete