Horizontal slide show javascript, moving divs horizontally


var c=2; var delay= 5000; var tx= 0; var nos=3; var boxwd= 940; var sli_box1 = document.getElementById("box1"); var sli_box2 = document.getElementById("box2"); var slideid=""; for(var u=1;u<=nos;u++) { var slideid = document.getElementById(slideid); document.write(''+ u+''); } sli_box1.innerHTML=slide2.innerHTML; sli_box2.innerHTML=slide1.innerHTML; window.onload=function() { setTimeout(slidem, delay); } function slidem() { var speed=50; if (parseInt(sli_box2.style.left)<0 || parseInt(sli_box1.style.left)<0) { tx=tx+10; if(tx >= 700 || tx < 200){ speed=10;} else {speed=speed;} sli_box2.style.left = parseInt(sli_box2.style.left) +speed; sli_box1.style.left = parseInt(sli_box1.style.left) +speed; setTimeout(slidem, 1); var err0=parseInt(sli_box1.style.left); var err1= parseInt(sli_box2.style.left); if( err0== 0 ) { setTimeout(slide1, delay); x=sli_box2; } if( err1== 0) { setTimeout(slide1, delay); x=sli_box1;} } function slide1() { tx=0; if(c>nos-1) { c=1;} else { c=c+1; } x.style.left= -boxwd+"px"; x.innerHTML=document.getElementById("slide"+c).innerHTML; slidem(); } } function goslide(t) { c=t-1; setTimeout(slidem(), 1); } This comes in the body =========================
<head> <style type="text/css">#box { width:940px;position: relative; height: 300px;overflow:hidden; padding:0px; overflow: hidden; margin:0px; } #count { width: 100px; height: 20px; margin-top: -20px; z-index: 1234; position: relative; left: 800px; } #count a { text-decoration:none; float: left; margin:2px; background-color: #ffffff; padding-left: 3px;overflow: hidden;padding-right: 2px; } #box1 { width: 940px; height:300px; padding: 0px;margin:0px;top: 0px; float: left; } #box2 { width: 940px; height: 300px; margin:0px;padding: 0px;top:0px; float: left; } #slide1, #slide2 ,#slide3,#slide4,#slide5,#slide6,#pos { display:none;padding:0px;margin:0px; } #slide1 #slide2 #slide3 { display:none; } <html> <head> <link href="images/hslide.css" rel="stylesheet" type="text/css"> </head> <body> <div id="box"> <div id="box1" style="left:-940px; top:0px; position: relative;"></div> <div id="box2" style="left:0px; top:-300px; position: relative;" ></div> </div> <div id="slide1"><img src="images/slide1.jpg"></div> <div id="slide2"><img src="images/slidebg.jpg"></div> <div id="slide3"><img src="images/slide3.jpg"></div> <div id="count"> <script src="images/hslide.js" type="text/javascript"> </script> </div> </body> </html>

Demo and Download

About the Code :

HTML part : One DIV comes with left:0px and top:-300px. Another one comes with left:-940px and top:0px; then we can see only one DIV, another DIV will be left side.

Javascript: This is a custom javascript. Based on the DIVid.left.style position an ncremenet is added till the DIV is out of stage due to the settimeout(1) we can see the DIV sliding.When it slides right out of stage it moves back to left(-940px) and there will be delay and it takes the data from next slide.After delay it slides back to the stage and we can see new slide.You just have to chnage few variables like nos, box width etc.