Simple Slider show using Javascript
The following script will populate the slider container control with the contents in the slider content js array in regular interval of time. Here You can pause the slider on mouse over and later resume the slider on mouseout events.
Sample Javascript code is given below:
Save the following script as slider.js
//--------- CODE STARTS -------
var mbSlider=new Array();
arrSlide[0]= 'HTML Content in Slide1';
arrSlide[1]= 'HTML Content in Slide2';
var slide_count=arrSlide.length;
var slide_ind=0;
var slide_speed=5000;
var slide_int;
//function to fill slide content to the slider ctrl
function displaySlide( ){
if( slide_ind == slide_count || slide_ind < 0 )
slide_ind=0;
document.getElementById('slide_contents').innerHTML=arrSlide[slide_ind];
slide_ind ++;
}
//function to pause slide show
function pauseSlide(){
clearInterval(slide_int);
}
//function to continue slide show
function runSlide(){
slide_int = setInterval("displaySlide()", slide_speed);
}
//start slider
runSlide();
//--------- CODE ENDS -------
How to display slide in HTML Page?
IN the html page
//--------- CODE STARTS -------
<html>
<head>
<title>Test Slide</title>
<script src="slider.js" type="text/javascript" ></script>
</head>
<body onload="runSlide()">
<div id="slide_contents">
Default content in slider container
</div>
</body>
</html>
//--------- CODE ENDS -------
The following script will populate the slider container control with the contents in the slider content js array in regular interval of time. Here You can pause the slider on mouse over and later resume the slider on mouseout events.
Sample Javascript code is given below:
Save the following script as slider.js
//--------- CODE STARTS -------
var mbSlider=new Array();
arrSlide[0]= 'HTML Content in Slide1';
arrSlide[1]= 'HTML Content in Slide2';
var slide_count=arrSlide.length;
var slide_ind=0;
var slide_speed=5000;
var slide_int;
//function to fill slide content to the slider ctrl
function displaySlide( ){
if( slide_ind == slide_count || slide_ind < 0 )
slide_ind=0;
document.getElementById('slide_contents').innerHTML=arrSlide[slide_ind];
slide_ind ++;
}
//function to pause slide show
function pauseSlide(){
clearInterval(slide_int);
}
//function to continue slide show
function runSlide(){
slide_int = setInterval("displaySlide()", slide_speed);
}
//start slider
runSlide();
//--------- CODE ENDS -------
How to display slide in HTML Page?
IN the html page
//--------- CODE STARTS -------
<html>
<head>
<title>Test Slide</title>
<script src="slider.js" type="text/javascript" ></script>
</head>
<body onload="runSlide()">
<div id="slide_contents">
Default content in slider container
</div>
</body>
</html>
//--------- CODE ENDS -------
Comments
Post a Comment