JavaScript codes for Web DEV

[JavaScriptBank]

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

Demo: JavaScript Streaming Horizontal Banner

How to setup

Step 1: Use CSS code below for styling the script
CSS

<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

<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: Copy & Paste HTML code below in your BODY section
HTML

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

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow