Horizontal Slider JavaScript v2.2


26 Nov 2009
Cross-Browser DHTML Horizontal Slide Show: JavaScript concatenates and slides any number of images from right to left. Adjustable: Size, Backgroun... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

How to setup

Step 1: Place CSS below in your HEAD section
<STYLE type=text/css>A {
A:link {
	COLOR: blue
A:visited {
	COLOR: blue
A:hover {
.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
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com

Step 2: Copy & Paste JavaScript code below in your HEAD section
<SCRIPT language=JavaScript>
if(top.location != self.location)

<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>';
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();}}
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com

Step 3: Place HTML below in your BODY section
<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>
<SCRIPT language=JavaScript>
function ctrlA0(corp) {
focus(); select()
window.status='Text copied to clipboard'
else window.status='Press ctrl-c to copy the text to the clipboard'
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com

Discussioni simili
Autore Titolo Forum Risposte Data
P Lightbox + Smooth Scroll Horizontal Javascript 1
J Streaming Horizontal Banner Javascript 0
D Pulsante aggiungi al carrello nello slider prodotti in offerta WordPress 4
M [Wordpress] Slider Revolution automatic link WordPress 0
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
A Slider in page php PHP 3
Francesco Oliviero Estrapolare HTML da questo sito (intera Range Slider) HTML e CSS 1
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
ecosito [WordPress] Immagine slider responsive su mobile WordPress 0
F [HTML] Bx Slider Full width HTML e CSS 1
andrew1975 [Joomla] nascondere lo slider Joomla 1
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
S [Javascript] Slider html: Mostrare immagini su 4 colonne Javascript 20
asevenx problema visualizzazione menu sovrapposto allo slider WordPress 7
felino [Wordpress] Custom Post Type: plugin per creare uno slider nei widget WordPress 0
F Zoom Slider jQuery 0
B Slider Immagini con condizioni PHP 1
felino [Slider Revolution] Cambio slide con click del mouse WordPress 0
B Problema di visualizzazione di uno Slider in jquery jQuery 4
L slider bootstrap HTML e CSS 0
asevenx problema visualizzazione slider con firefox HTML e CSS 3
asevenx plugin slider scorrimento immagini WordPress 2
F Centrare slider div HTML e CSS 1
L slider HTML e CSS 2
M Problema slider responsive! Aiuuuutooo HTML e CSS 2
otto9due Come creare questo slider? jQuery 0
asevenx plugin slider immagini WordPress 1
F Implementazione slider jQuery 0
F slider full screen HTML e CSS 0
F slider+fancybox jQuery 0
R Slider con gestione settimanale jQuery 1
P Problema slider jQuery 2
I Aiuto uso Nivo Slider con javascript jQuery 2
R Problema con slider jQuery HTML e CSS 1
I Slider di ultimi post inseriti. WordPress 1
F [RISOLTO] Creazione slider con anteprima con jquery jQuery 8
7thl Slider head per ogni singola pagina WordPress 2
A slider effetto 3d e IE HTML e CSS 5
G Problemi con stesso slider per più gallerie Javascript 2
playmo aiuto su slider img + video jQuery 2
A problema con jquery.nivo.slider.js Javascript 0
A nivo slider con dreamweaver Javascript 1
T Slider immagini con anteprima Javascript 1
C problema bottoni coin slider jQuery 1
Skipper Slider fotografico Javascript 0
B problema slider jquery in iframe jQuery 3
B problema slider jquery jQuery 0
M Easy Slider e jQuery jQuery 1
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1

Discussioni simili