« »

Add a banner roll to your Web site with this easy-to-use script. Each banner can also include a URL. The size can be set in the script file.

Label: Streaming Banners

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.jsbank_sample_cont {margin: 20px; padding: 20px;}
.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}
/*
Created by: Jeroen Haan 
Web Site: http://www.haan.net/
*/
#slideCont {
	margin: 10px;
	border: solid 1px #000;
	text-align: center;
}
#slideCont img {
	margin: 5px;
}
</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">
/* -----------------------------------------------
   Streaming banners - v.1.1
   (c) 2006 www.haan.net
   contact: jeroen@haan.net
   You may use this script but please leave the credits on top intact.
   Please inform us of any improvements made.
   When useful we will add your credits.
  ------------------------------------------------ */

/* usage
<body>
<div id="slideCont" style="position:relative;z-index:1;width:140px;left:0px;overflow:hidden;"> 
	<div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;"> 
		your banners (images inside anchor tags)
		<div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">  
			your banners (images inside anchor tags)
		</div>
	</div>
</div>
</body>
*/

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

 	var id1 = document.getElementById('slideA');
 	var id2 = document.getElementById('slideB');
 	var height = id1.offsetHeight;
 	
 	id1.style.top = parseInt(id1.style.top)-1 + 'px';
 	
 	document.getElementById('slideCont').style.height = contHeight + "px";
 	document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
 	id2.style.display = '';
 	if(parseFloat(id1.style.top) == -(height/2)) {
  		id1.style.top = '0px';
 	}
 	setTimeout(clip,50)
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div id="slideCont" style="position:relative;z-index:1;width:140px;left:400px;overflow:hidden;">
  <div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
    <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a>
    <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="120" height="60" border="0"></a>
    <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="64" border="0"></a>
    <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="44" border="0"></a>
    <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a>
    <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="34" border="0"></a>

    <div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
      <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a>
      <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="120" height="60" border="0"></a>
      <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="64" border="0"></a>
      <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="44" border="0"></a>
      <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a>
      <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="34" border="0"></a>
    </div>
  </div>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->