Hi all! I found that is difficult to search a simple javascript code about scrolling image slide. You can find them on Internet but they often are long and complex or hidden from us to prevent edit. I just found a simple way to resolve this. I hope it will help your editting easier to make it yours! We need 2 div tag to make a slide. ChildDiv to store image array and ParentDiv to contain Child Div. Note: Image Array's Structure: [<Image's Link>, <Image's Width>, <URL to Go>] Functions: DoSlide(), Make Slide to run. setmouse(param), set Slide play and pause when pointer over or out on images; Dr_ImgArr(); Print image array to HTML; getE(), getElementById(); DivWidth: Width of ParentDiv; MoreImage: Num Of Image on a begin of Image Array, insert into the last of ChildDiv to continue the Slide; .... If you have anymore comment, please reply here so that I can make it more perfect, thank for all. Demo: http://boy.us.com/Code/slide.php Style <style> #ParentDiv { margin: auto; width: 600px; overflow: hidden; } #ChildDiv { width: 6000px; position:relative; cursor:pointer; } #ParentDiv img { float: left; padding: 3px; margin: 0px; } </style> Code (markup): Javascript <script> //Array Of Image, [ URL, width of Image, LinkTo] var t; var StepTime=10; var StepPixel=1; var ImgPadding=3; var ParentDivLen=600; var Img= Array( ["./images/slide/3_116.jpg", 104, "../gal/?gal=3&Type=image&ID=116"], ["./images/slide/4_250.jpg", 103, "../gal/?gal=4&Type=image&ID=250"], ["./images/slide/1_157.jpg", 107, "../gal/?gal=1&Type=image&ID=157"], ["./images/slide/2_120.jpg", 124, "../gal/?gal=2&Type=image&ID=120"], ["./images/slide/4_229.jpg", 116, "../gal/?gal=4&Type=image&ID=229"], ["./images/slide/3_173.jpg", 113, "../gal/?gal=3&Type=image&ID=173"], ["./images/slide/2_192.jpg", 110, "../gal/?gal=2&Type=image&ID=192"], ["./images/slide/4_111.jpg", 104, "../gal/?gal=4&Type=image&ID=111"], ["./images/slide/5_244.jpg", 106, "../gal/?gal=5&Type=image&ID=244"], ["./images/slide/5_279.jpg", 109, "../gal/?gal=5&Type=image&ID=279"], ["./images/slide/5_233.jpg", 102, "../gal/?gal=5&Type=image&ID=233"], ["./images/slide/5_256.jpg", 106, "../gal/?gal=5&Type=image&ID=256"], ["./images/slide/5_248.jpg", 111, "../gal/?gal=5&Type=image&ID=248"], ["./images/slide/3_143.jpg", 99, "../gal/?gal=3&Type=image&ID=143"], ["./images/slide/1_225.jpg", 103, "../gal/?gal=1&Type=image&ID=225"], ["./images/slide/4_103.jpg", 109, "../gal/?gal=4&Type=image&ID=103"], ["./images/slide/4_145.jpg", 118, "../gal/?gal=4&Type=image&ID=145"], ["./images/slide/5_263.jpg", 100, "../gal/?gal=5&Type=image&ID=263"], ["./images/slide/2_115.jpg", 102, "../gal/?gal=2&Type=image&ID=115"], ["./images/slide/4_140.jpg", 122, "../gal/?gal=4&Type=image&ID=140"], ["./images/slide/1_214.jpg", 112, "../gal/?gal=1&Type=image&ID=214"], ["./images/slide/3_142.jpg", 102, "../gal/?gal=3&Type=image&ID=142"], ["./images/slide/5_297.jpg", 99, "../gal/?gal=5&Type=image&ID=297"], ["./images/slide/4_168.jpg", 101, "../gal/?gal=4&Type=image&ID=168"], ["./images/slide/5_277.jpg", 111, "../gal/?gal=5&Type=image&ID=277"], ["./images/slide/5_296.jpg", 103, "../gal/?gal=5&Type=image&ID=296"], ["./images/slide/4_169.jpg", 109, "../gal/?gal=4&Type=image&ID=169"], ["./images/slide/4_244.jpg", 110, "../gal/?gal=4&Type=image&ID=244"], ["./images/slide/5_285.jpg", 112, "../gal/?gal=5&Type=image&ID=285"], ["./images/slide/3_100.jpg", 111, "../gal/?gal=3&Type=image&ID=100"], ["./images/slide/1_103.jpg", 111, "../gal/?gal=1&Type=image&ID=103"], ["./images/slide/1_119.jpg", 104, "../gal/?gal=1&Type=image&ID=119"], ["./images/slide/5_253.jpg", 107, "../gal/?gal=5&Type=image&ID=253"], ["./images/slide/4_183.jpg", 105, "../gal/?gal=4&Type=image&ID=183"], ["./images/slide/4_171.jpg", 111, "../gal/?gal=4&Type=image&ID=171"], ["./images/slide/2_147.jpg", 126, "../gal/?gal=2&Type=image&ID=147"], ["./images/slide/3_115.jpg", 116, "../gal/?gal=3&Type=image&ID=115"], ["./images/slide/5_310.jpg", 113, "../gal/?gal=5&Type=image&ID=310"], ["./images/slide/4_185.jpg", 109, "../gal/?gal=4&Type=image&ID=185"], ["./images/slide/3_159.jpg", 108, "../gal/?gal=3&Type=image&ID=159"], ["./images/slide/2_154.jpg", 125, "../gal/?gal=2&Type=image&ID=154"], ["./images/slide/5_314.jpg", 107, "../gal/?gal=5&Type=image&ID=314"], ["./images/slide/2_106.jpg", 100, "../gal/?gal=2&Type=image&ID=106"], ["./images/slide/4_123.jpg", 103, "../gal/?gal=4&Type=image&ID=123"] ); var Pos=0; var Len=Img.length; var DivWidth=0; var MoreImage=0; function goURL(URLS) { document.location.href=URLS; } for(i=0;i<Len;i++) { DivWidth+=Img[i][1] + ImgPadding*2; if(MoreImage==0 && DivWidth>ParentDivLen)MoreImage=i; } function getE(id) { return document.getElementById(id); } function Dr_Img(IMG) { return '<img src="'+ IMG[0] + '" onclick="goURL(\'' + IMG[2] + '\')">'; } function Dr_ImgArr() { var str=''; for(i=0;i<Len;i++) str += Dr_Img(Img[i]); for(i=0;i<MoreImage;i++)str += Dr_Img(Img[i]); document.write(str); } function DoSlide() { if(Pos==0)Pos=-1; divtg=getE('ChildDiv'); Pos-=StepPixel; if(Pos<-DivWidth)Pos=0; divtg.style.left=Pos +'px'; t=setTimeout('DoSlide()',StepTime); } function SlideStop() { clearTimeout(t); } function setmouse(id) { if(id==1) { DoSlide(); } else { SlideStop(); } } </script> Code (markup): HTML Body <div id="ParentDiv"> <div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);"> <script> Dr_ImgArr(); </script> </div> </div> Code (markup):
nice! looks like it works really nice... I might use this... PS: He has a link! http://boy.us.com/Code/slide.php
The Image List is generated by Server-Side Scripting. By names images in a rule, then scan the images/slide folder for make list. You should make it yourself, or ask me for free.