Preview - Horizontal Slider JavaScript v2.2

JavaScript Code, Tutorials, Examples, Reference

Provide thousands of free JavaScript code, DHTML, Tutorials, Examples, Reference and Help. JavaScriptBank.com is the best resources with 2000+ codes

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com

Use 'Select' to copy the whole box (then Ctrl C)

<HTML><HEAD>
<title>Horizontal Slider v2.2</title>

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
A { text-decoration:none;}
A:link { COLOR: blue }
A:visited { COLOR: blue }
A:hover { COLOR: red;background-color:#66ffff; }
.tab { font-weight:bold; font-size:12px; font-family:Arial,Helvetica;}
.tabc { font-weight:bold;font-size:12px;font-family:Arial,Helvetica;color:navy;TEXT-ALIGN: center;}
.slsh { font-weight:bold; font-size:18px; font-family:Arial,Helvetica;color:red;TEXT-ALIGN: center;}
</style>

/***********************************
*   http://javascripts.vbarsan.com/
*   This notice may not be removed 
***********************************/

//slider's width
var swidth=240;

//slider's height
var sheight=50;

//slider's speed
var sspeed=2;
var resspeed=sspeed;
var restart=sspeed;
var rspeed=sspeed;

//slider's background 
var scolor="#ccffcc";

//slider's border
var sborder="2";

var imagef='';

//images-1: change to your own set of Images
//Preload is recommended (no downloading check) - otherwise you may skip this:
preload1 = new Image();
preload1.src = "http://www.hotscripts.com/hsimages/logo.gif";
preload2 = new Image();
preload2.src = "http://www.inetinteractive.com/images/logo.gif";
preload3 = new Image();
preload3.src = "http://images.hotscripts.com/static/1.gif";
// ...

var leftimage=new Array();
//images-2: change to your own set of Hyperlinks and Images parameters
//remove <a ... > & </a> portions where no Hyperlink used
//if no preloading, replace '+ ... +' with the actual Images path "..."
leftimage[0]='<a href="http://hotscripts.com/Detailed/53286.html"><img src='+preload1.src+' height=47 alt="Horizontal Scroller - Multiple Message Belt Conveyer v7.0"></a>';
leftimage[1]='<a href="http://hotscripts.com/Detailed/53284.html"><img src='+preload2.src+' height=47 alt="Vertical Scroller - Multiple Message Vertical Scroller v7.0"></a>';
leftimage[2]='<a href="http://hotscripts.com/Detailed/53287.html"><img src='+preload3.src+' height=47 alt="Typewriter Scroller - Multiple Message Typewriter Scroller v5.0"></a>';
leftimage[3]='<a href="http://hotscripts.com/Detailed/53286.html"><img src='+preload1.src+' height=47 alt="Horizontal Scroller - Multiple Message Belt Conveyer v7.0"></a>';
leftimage[4]='<a href="http://hotscripts.com/Detailed/53284.html"><img src='+preload2.src+' height=47 alt="Vertical Scroller - Multiple Message Vertical Scroller v7.0"></a>';
leftimage[5]='<a href="http://hotscripts.com/Detailed/53287.html"><img src='+preload3.src+' height=47 alt="Typewriter Scroller - Multiple Message Typewriter Scroller v5.0"></a>';
//leftimage[...]=' ... ';

for (mi=0;mi<leftimage.length;mi++)
imagef=imagef+leftimage[mi];

function goup(){if(sspeed!=rspeed*8){sspeed=sspeed*2;restart=sspeed;}}

<BODY onload="start();">

<SCRIPT language="javascript">document.write('<table border=2 align="center" bgcolor="#ccffcc"><tr><td bgcolor="#ffffcc"><div class=tabc><b><a class=tab href="#" onClick="goup();">Speed<br>UP</a></b></div></td><td width='+swidth+'>');if(document.layers)document.write('<span style="borderWidth:0.1px; borderStyle:none; clip:rect(0 '+swidth+' '+sheight+' 0);"><ilayer width='+swidth+' height='+sheight+' name="slider1"><layer class=slsh width='+swidth+' height='+sheight+'>SLIDING SHOW</layer><layer width='+swidth+' height='+sheight+' name="slider2" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></layer></ilayer></span>');else {document.write('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);">');if(operbr!=-1)document.write('<div id="opslider" style="position:absolute;visibility:hidden;"></div>');else document.write('<div class=slsh style="position:absolute;width:'+swidth+';height:'+sheight+';">SLIDING SHOW</div>');document.write('<div id="slider" style="position:relative;height:'+sheight+';" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></div></div>');}</SCRIPT></td></tr></table>

</BODY></HTML>

by Vasile Barsan