« »

Cross-Browser DHTML Horizontal Slide Show: JavaScript concatenates and slides any number of images from right to left. Adjustable: Size, Background, Border, Name, and Speed (live, too). You may use Hyperlinks with any/all images. Pauses when mouse is placed over it.

Label: Horizontal Slider JavaScript v2.2

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE type=text/css>A {
	TEXT-DECORATION: none
}
A:link {
	COLOR: blue
}
A:visited {
	COLOR: blue
}
A:hover {
	COLOR: red; BACKGROUND-COLOR: #66ffff
}
.tab {
	FONT-SIZE: 12px; FONT-FAMILY: Arial,Helvetica
}
.tabc {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center
}
.tabt {
	FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: red; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT language=JavaScript>
if(top.location != self.location)
top.location.replace(self.location);
</SCRIPT>

<SCRIPT language=javascript>

//If using any portion of this DEMO script,
//one must insert along this notice too:


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

var swidth=310;var sheight=50;var sspeed=2;var resspeed=sspeed;var restart=sspeed;var rspeed=sspeed;var imagef='';
preload1 = new Image();
preload1.src = "../image/gif_logojsb2.gif";
preload2 = new Image();
preload2.src = "../image/gif_logojsb.gif";
preload3 = new Image();
preload3.src = "../image/gif_logojsb2.gif";
var leftimage=new Array();
leftimage[0]='<a href="http://javascriptbank.com"><img src='+preload1.src+' width=310 height=47 alt="JavaScript Bank"></a>';
leftimage[1]='<a href="http://javascriptbank.com"><img src='+preload2.src+' width=310 height=47 alt="JavaScript Bank"></a>';
leftimage[2]='<a href="http://javascriptbank.com"><img src='+preload3.src+' width=310 height=47 alt="JavaScript Bank"></a>';
for(mi=0;mi<leftimage.length;mi++)imagef=imagef+leftimage[mi];
function goup(){if(sspeed!=rspeed*8){sspeed=sspeed*2;restart=sspeed;}}
function start(){if(document.getElementById)firstns6(document.getElementById('slider'));else if(document.all)firstie(slider);else if(document.layers)firstns4(document.slider1.document.slider2);}
var operbr=navigator.userAgent.toLowerCase().indexOf('opera');if(operbr==-1&&navigator.product&&navigator.product=="Gecko"){var agt = navigator.userAgent.toLowerCase();var rvStart = agt.indexOf('rv:');var rvEnd = agt.indexOf(')', rvStart);var check15 = agt.substring(rvStart+3, rvEnd);if(parseFloat(check15)>=1.8) operbr=0;}if (navigator.appVersion.indexOf("Mac")!=-1)operbr=0;
function firstns4(whichdiv){tdivns4=eval(whichdiv);tdivns4.document.write('<nobr>'+imagef+'</nobr>');tdivns4.document.close();thel=tdivns4.document.width;tdivns4.left=swidth;slidens4();}
function slidens4(){if(tdivns4.left>=thel*(-1)){tdivns4.left-=sspeed;setTimeout("slidens4()",100);}else{tdivns4.left=swidth;slidens4();}}
function firstie(whichdiv){tdivie=eval(whichdiv);tdivie.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdivie.offsetWidth;tdivie.style.pixelLeft=swidth;slideie();}
function slideie(){if(tdivie.style.pixelLeft>thel*(-1)){tdivie.style.pixelLeft-=sspeed;setTimeout("slideie()",100);}else{tdivie.style.pixelLeft=swidth;slideie();}}
function firstns6(whichdiv){tdiv6=eval(whichdiv);tdiv6.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdiv6.offsetWidth;if(operbr!=-1){opslider.innerHTML='<nobr>'+imagef+'</nobr>';thel=opslider.offsetWidth;}tdiv6.style.left=swidth;slidens6();}
function slidens6(){if(parseInt(tdiv6.style.left)>=thel*(-1)){tdiv6.style.left=parseInt(tdiv6.style.left)-sspeed;setTimeout("slidens6()",100);}else{tdiv6.style.left=swidth;slidens6();}}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<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=tabt 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=tabt 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><BR>
</fieldset>
</center>
<SCRIPT language=JavaScript>
function ctrlA0(corp) {
with(corp){
focus(); select()
}
if(document.all){
txt=corp.createTextRange()
txt.execCommand("Copy")
window.status='Text copied to clipboard'
}
else window.status='Press ctrl-c to copy the text to the clipboard'
setTimeout("window.status=''",5000)
}
</SCRIPT>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->