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
Step 2: Place JavaScript below in your HEAD section
JavaScript
Step 3: Place HTML below in your BODY section
HTML
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>