Image scrolls left or right

[Total: 0    Average: 0/5]

Concatenates and Slides any number of images from right to left. Adjustable:

Head Code:

<style type="text/css">
.slsh { font-weight:bold; font-size:18px; font-family:Arial,Helvetica;color:red;TEXT-ALIGN: center;}
</style>

<SCRIPT language="javascript">

/***********************************
*   http://javascripts.vbarsan.com/
*   This notice may not be removed 
***********************************/

//slider's width
var swidth=245;

//slider's height
var sheight=48;

//slider's speed
var sspeed=2;
var resspeed=sspeed;

//slider's background 
var scolor="#ccffcc";

//slider's border
var sborder="2"; 

var imagef='';

//images-1: change to your own set of Images
//Preload is recommended (no downloading check) - otherwise you may skip this:
preload1 = new Image();
preload1.src = "http://www.hotscripts.com/hsimages/logo.gif";
preload2 = new Image();
preload2.src = "http://www.internet.com/img/jvscrpts-micro.gif";
preload3 = new Image();
preload3.src = "http://i.i.com.com/cnwk.1d/i/cn/2001_a.gif";
preload4 = new Image();
preload4.src = "http://javascript.internet.com/img/headerlogo.gif";
preload5 = new Image();
preload5.src = "http://www.scriptsearch.com/img/logo.gif";
preload6 = new Image();
preload6.src = "http://www.regsoft.com/images/logo.gif";
// ...

var leftimage=new Array();
//images-2: change to your own set of Hyperlinks and Images parameters
//remove <a ... > & </a> portions where no Hyperlink used
//if no preloading, replace '+ ... +' with the actual Images path "..."
leftimage[0]='<a href="http://hotscripts.com"><img src='+preload1.src+' height=45 alt="Hotscripts"></a>';
leftimage[1]='<a href="http://javascripts.com"><img src='+preload2.src+' height=45 alt="JavaScripts"></a>';
leftimage[2]='<a href="http://download.com"><img src='+preload3.src+' height=45 alt="CNET DownLoad"></a>';
leftimage[3]='<a href="http://javascript.internet.com"><img src='+preload4.src+' height=45 alt="JavaScript Source"></a>';
leftimage[4]='<a href="http://www.scriptsearch.com"><img src='+preload5.src+' height=45 alt="Scriptsearch.com"></a>';
leftimage[5]='<a href="http://www.regsoft.com/"><img src='+preload6.src+' height=45 alt="E-Commerce Solutions"></a>';
//leftimage[...]=' ... ';

for (mi=0;mi<leftimage.length;mi++)
imagef=imagef+leftimage[mi];

function start(){
if(document.all)firstie(slider);
else if(document.getElementById)firstns6(document.getElementById('slider'));
else if(document.layers)firstns4(document.slider1.document.slider2);
}
var operbr=navigator.userAgent.toLowerCase().indexOf('opera');
function firstns4(whichdiv){tdivns4=eval(whichdiv);tdivns4.document.write('<nobr>'+imagef+'</nobr>');tdivns4.document.close();thel=tdivns4.document.width;tdivns4.left=swidth;slidens4();}
function slidens4(){if(tdivns4.left>=thel*(-1)){tdivns4.left-=sspeed;setTimeout("slidens4()",100);}else{tdivns4.left=swidth;slidens4();}}
function firstie(whichdiv){tdivie=eval(whichdiv);tdivie.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdivie.offsetWidth;if(operbr!=-1){opslider.innerHTML='<nobr>'+imagef+'</nobr>';thel=opslider.offsetWidth;}tdivie.style.pixelLeft=swidth;slideie();}
function slideie(){if(tdivie.style.pixelLeft>=thel*(-1)){tdivie.style.pixelLeft-=sspeed;setTimeout("slideie()",100);}else{tdivie.style.pixelLeft=swidth;slideie();}}
function firstns6(whichdiv){tdiv6=eval(whichdiv);tdiv6.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdiv6.offsetWidth;tdiv6.style.left=swidth;slidens6();}
function slidens6(){if(parseInt(tdiv6.style.left)>=thel*(-1)){tdiv6.style.left=parseInt(tdiv6.style.left)-sspeed;setTimeout("slidens6()",100);}else{tdiv6.style.left=swidth;slidens6();}}
</script>

Body Code:

<SCRIPT language="javascript">document.write('<table border=2 align="center" bgcolor="#ccffcc"><tr><td width='+swidth+'>');if(document.layers)document.write('<span style="borderWidth:0.1px; borderStyle:none; clip:rect(0 '+swidth+' '+sheight+' 0);"><ilayer width='+swidth+' height='+sheight+' name="slider1"><layer class=slsh width='+swidth+' height='+sheight+'>SLIDING SHOW</layer><layer width='+swidth+' height='+sheight+' name="slider2" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></layer></ilayer></span>');else {document.write('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);">');if(operbr!=-1)document.write('<div id="opslider" style="position:absolute;visibility:hidden;"></div>');else document.write('<div class=slsh style="position:absolute;width:'+swidth+';height:'+sheight+';">SLIDING SHOW</div>');document.write('<div id="slider" style="position:relative;height:'+sheight+';" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></div></div>');}</script></td></tr></table>
<hr>
<form><input type=button value="Start" onclick="start()"></form>

Times Viewed: 8

Leave a Reply

Your email address will not be published. Required fields are marked *