Full version: jsB@nk » Image » Slideshow » Streaming Horizontal Banner
URL: https://www.javascriptbank.com/streaming-horizontal-banner.html
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.
Full version: jsB@nk » Image » Slideshow » Streaming Horizontal Banner
URL: https://www.javascriptbank.com/streaming-horizontal-banner.html
<style type="text/css"><!--#slideCont { border:solid 1px #000; text-align:center;}#slideCont img { margin: 5px;}--></style><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><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>