Simple Slider show using Javascript - JS Slide show script

josejohnson63

josejohnson63

New Member
Messages
9
Reaction score
0
Points
1
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.

Get Sample Javascript code
 
josejohnson63

josejohnson63

New Member
Messages
9
Reaction score
0
Points
1
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 -------
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Please use
PHP: 
, [html] or [code] tags (as appropriate) to separate and format code.

The code uses far too many [URL="http://c2.com/cgi/wiki?GlobalVariablesAreBad"]global variables[/URL]. One simple fix is to wrap it in an anonymous, [URL="http://2007-2010.lovemikeg.com/2008/08/17/a-week-in-javascript-patterns-self-invocation/"]self-invoking function[/URL]. Another is to use JS's [URL="http://www.brainonfire.net/blog/javascript-object-literal-namespace/"]namespace pattern[/URL] ([URL="http://www.chrislambistan.com/2011/07/design-primitives-in-javascript_10.html"][2][/URL]): make the variables and functions properties of an object literal. The first essentially gives you a private namespace, the second a public one. You can even combine the techniques and populate the [URL="http://sparecycles.wordpress.com/2008/06/29/advanced-javascript/"]namespace in a self-invoking function[/URL], and make public namespace names [URL="http://msdn.microsoft.com/en-us/magazine/gg578608.aspx"]static or dynamic[/URL].

[quote="josejohnson63, post: 890846"][code][...]
    document.getElementById('slide_contents').innerHTML=arrSlide[slide_ind];
[/code][/QUOTE]

Using a literal for the slide ID of the slide isn't very flexible. Better to store it in a variable, settable by assigning to an object property or by calling a setter.

[quote="josejohnson63, post: 890846"][code][...]
    slide_int = setInterval("displaySlide()", slide_speed);
[/code][/QUOTE]
[c]setInterval[/c] (and every other [URL="http://en.wikipedia.org/wiki/Higher-order_function"]higher-order function[/URL]) accepts a function as the first argument, which is preferable to a string as it doesn't require an extra evaluation step and it's more flexible in cases when you must use variables in the function call (not applicable here, but quite useful other times):
[code]
    slide_int = setInterval(displaySlide, slide_speed);
[/code]

[quote="josejohnson63, post: 890846"][code][...]
//start slider
runSlide();
[/code]
[...]
[html]
<html>
  <head>
    <title>Test Slide</title>
    <script src="slider.js" type="text/javascript" ></script>
  </head>
  <body onload="runSlide()">
[/html][/quote]
[c]runSlide[/c] is called twice: once in the script and once in the body's "load" handler. One should be removed. Moreover, code should generally either define things or do things, not both. The slider library should be limited to defining things, and slider set-up should be handled elsewhere.
 
You must log in or register to reply here.
Top