Streaming Horizontal Banner

JavaScriptBank

Bannato
26 Nov 2009
86
0
0
Use this JavaScript code to make a a horizontal image scroller on your web page. If do not view the source code, maybe you will think tha... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Use CSS code below for styling the script
CSS
Codice:
<style type="text/css">
<!--
#slideCont {
 	border:solid 1px #000;
	 text-align:center;
}

#slideCont img {
 	margin: 5px;
}
-->
</style>

Step 2: Place JavaScript below in your HEAD section
JavaScript
Codice:
<script type="text/javascript">
<!--
/* 
  -----------------------------------------------
   Streaming banners - v.1
   (c) 2006 www.haan.net
   You may use this script but please leave the credits on top intact.
   Please inform us of any improvements made.
   When usefull we will add your credits.
  ------------------------------------------------ */
<!--

function clip() {
 	// width of the banner container
 	var contWidth = 425;
 	// height of the banner container
 	var contHeight = 90;

 	var id1 = document.getElementById('slideA');
 	var id2 = document.getElementById('slideB');

 	id1.style.left = parseInt(id1.style.left)-1 + 'px';
 	
 	document.getElementById('slideCont').style.width = contWidth + "px";
 	document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
 	id2.style.display = '';
 	if(parseFloat(id1.style.left) == -(contWidth)) 	{
 		id1.style.left = '0px';
 	}
 	setTimeout(clip,25)
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  clip();
});
//-->
</script>

Step 3: Place HTML below in your BODY section
HTML
Codice:
<div id="slideCont" style="overflow: hidden; position: relative; z-index: 1; width: 425px; height: 90px; top: 0px; clip: rect(auto, 425px, 90px, auto);">
	<div id="slideA" style="overflow: hidden; position: absolute; z-index: 1; top: 0px; left: -194px; width: 850px; height: 90px;">
		<div style="float: left;" id="innerSlideA">
			<a href="http://www.apache.org/"><img src="/logos/logo_jsbank.jpg" border="0" height="44" width="126"></a>
			<a href="http://www.haan.net/"><img src="/logos/gif_logojsb2.gif" border="0" height="60" width="120"></a>
			<a href="http://www.mysql.com/"><img src="/logos/jsb_banner.gif" border="0" height="44" width="126"></a>

		</div>
		<div id="slideB" style="overflow: hidden; position: relative; z-index: 1; top: 0px; left: 0px; width: 425px; height: 90px;">
			<a href="http://www.apache.org/"><img src="/logos/logo_jsb.jpg" border="0" height="44" width="126"></a>
			<a href="http://www.haan.net/"><img src="/logos/logo_jsb__88x31.gif" border="0" height="60" width="120"></a>
			<a href="http://www.mysql.com/"><img src="/logos/logo_jsb_120x60.jpg" border="0" height="44" width="126"></a>
		</div>
	</div>
</div>






 
Discussioni simili
Autore Titolo Forum Risposte Data
D metadata flusso streaming PHP 3
O IP Cam in streaming su sito web IP Cam e Videosorveglianza 2
L CERCO SOCIO PER IL MIO SITO STREAMING FILM Offerte e Richieste di Lavoro e/o Collaborazione 2
M aggiungere streaming audio a pagina html HTML e CSS 2
F costi hosting per video streaming Hosting 1
L [HTML] Video streaming in homepage HTML e CSS 6
felino [Wordpress] Servizio di streaming WordPress 8
felino [PHP] Servizio streaming da una sorgente video qualunque PHP 0
T Streaming audio (solo audio) della ipcam (cinesi) simil foscn mJpeg IP Cam e Videosorveglianza 0
F WebCam Streaming sul mio sito Javascript 0
K Integrare player per streaming mss:// nella mia App Sviluppo app per Android 0
filippino Creare blog con link a siti con film in streaming Leggi, Normative e Fisco 0
M embedare streaming in HTML5 compatibili con Android HTML e CSS 1
Z Hosting per streaming Hosting 2
F Player per riproduzione "streaming live" di video Flash 5
M vendo pagina facebook film in streaming Annunci servizi di Social Media Marketing 0
W Streaming video HTML e CSS 0
A Perché secondo voi questo streaming si blocca? PHP 2
A Come utilizzare cURL per connettersi a uno streaming? PHP 0
S [Vendo] banner di diverso formato a partire da €1 su streaming-mania.it Vendere e Acquistare pubblicita' online 0
F Player Video da inserire in sito streaming, tipo Shadowbox Javascript 0
micio86 Live webcam streaming Guadagnare col Sito 1
W Streaming video Sicuro !!! Ajax 4
A TV in streaming nel sito Discussioni Varie 0
M Streaming da webcam su di un sito HTML e CSS 1
U Film in streaming Presenta il tuo Sito 0
M player streaming Flash 1
F streaming radio Discussioni Varie 0
C mp3 in streaming da far iniziare dal mezzo Flash 3
C (RETRIBUITO) Collaborazione: sito riguardante lo streaming! Presenta il tuo Sito 0
SolidSnake4 tv sul web in streaming HTML e CSS 0
S Problema Audio in Streaming-Flash con Explorer Flash 1
C Collaborazione: sito con partite di calcio in streaming GRATIS! Presenta il tuo Sito 3
P Streaming audio J2ME Windows e Software 0
K problemi con lo streaming audio (xine-demuxer) Linux e Software 0
eternallife PopUp Streaming Javascript 5
I problema Streaming Webdesign e Grafica 0
C Refresh automatico streaming rtsp Javascript 0
F pagina con le radio in streaming HTML e CSS 4
M Streaming per il mio sito Discussioni Varie 0
K Inserire video/audio nel sito e streaming... HTML e CSS 2
S vedere in streaming un video HTML e CSS 2
S Animazione per Radio Streaming Flash 0
G Video in streaming Webdesign e Grafica 0
P Lightbox + Smooth Scroll Horizontal Javascript 1
J Horizontal Slider JavaScript v2.2 Javascript 0
T [VENDO] Banner ADV su Magazine Moto Vendere e Acquistare pubblicita' online 0
D [VENDO] Guest Post/Banner su sito Offerte e Richieste di scambio links 0
M [VENDO] Banner / Video Vendere e Acquistare pubblicita' online 1
riminese77 Gratuito portale Banner Offerte e Richieste di Lavoro e/o Collaborazione 0

Discussioni simili