« »

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 that this code use MARQUEE for horizontal scroller.

Very easy to customize, can also include a URL for each image, can set size for each image. And you also see: Streaming Banners.

Label: streaming, horizontal, banner, scroller, MARQUEE, customize, URL

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
<!--
#slideCont {
 	border:solid 1px #000;
	 text-align:center;
}

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

Copy All x2

<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>

Copy All x2

<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>