RSS Forums RSS
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 731 | Replies: 1 | Thread Tools  Display Modes
•
•
•
•
Previous Post in Thread Previous Post in Thread   Next Post in Thread Next Post in Thread
•
•
Join Date: May 2008
Posts: 3
Reputation: o0DarkEvil0o is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 1
o0DarkEvil0o's Avatar
o0DarkEvil0o o0DarkEvil0o is offline Offline
Newbie Poster

A new simply way to make a image slider- Javascript Code

  #1  
May 16th, 2008
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>

Javascript
Javascript Syntax (Toggle Plain Text) 
  1. <script>
  2. //Array Of Image, [URL, width of Image, LinkTo]
  3. var t;
  4. var StepTime=10;
  5. var StepPixel=1;
  6. var ImgPadding=3;
  7. var ParentDivLen=600;
  8. var Img= 
  9. [
  10. ["./images/slide/3_116.jpg", 104, "../gal/?gal=3&Type=image&ID=116"], 
  11. ["./images/slide/4_250.jpg", 103, "../gal/?gal=4&Type=image&ID=250"], 
  12. ["./images/slide/1_157.jpg", 107, "../gal/?gal=1&Type=image&ID=157"], 
  13. ["./images/slide/2_120.jpg", 124, "../gal/?gal=2&Type=image&ID=120"], 
  14. ["./images/slide/4_229.jpg", 116, "../gal/?gal=4&Type=image&ID=229"], 
  15. ["./images/slide/3_173.jpg", 113, "../gal/?gal=3&Type=image&ID=173"], 
  16. ["./images/slide/2_192.jpg", 110, "../gal/?gal=2&Type=image&ID=192"], 
  17. ["./images/slide/4_111.jpg", 104, "../gal/?gal=4&Type=image&ID=111"], 
  18. ["./images/slide/5_244.jpg", 106, "../gal/?gal=5&Type=image&ID=244"], 
  19. ["./images/slide/5_279.jpg", 109, "../gal/?gal=5&Type=image&ID=279"], 
  20. ["./images/slide/5_233.jpg", 102, "../gal/?gal=5&Type=image&ID=233"], 
  21. ["./images/slide/5_256.jpg", 106, "../gal/?gal=5&Type=image&ID=256"], 
  22. ["./images/slide/5_248.jpg", 111, "../gal/?gal=5&Type=image&ID=248"], 
  23. ["./images/slide/3_143.jpg", 99, "../gal/?gal=3&Type=image&ID=143"], 
  24. ["./images/slide/1_225.jpg", 103, "../gal/?gal=1&Type=image&ID=225"], 
  25. ["./images/slide/4_103.jpg", 109, "../gal/?gal=4&Type=image&ID=103"], 
  26. ["./images/slide/4_145.jpg", 118, "../gal/?gal=4&Type=image&ID=145"], 
  27. ["./images/slide/5_263.jpg", 100, "../gal/?gal=5&Type=image&ID=263"], 
  28. ["./images/slide/2_115.jpg", 102, "../gal/?gal=2&Type=image&ID=115"], 
  29. ["./images/slide/4_140.jpg", 122, "../gal/?gal=4&Type=image&ID=140"], 
  30. ["./images/slide/1_214.jpg", 112, "../gal/?gal=1&Type=image&ID=214"], 
  31. ["./images/slide/3_142.jpg", 102, "../gal/?gal=3&Type=image&ID=142"], 
  32. ["./images/slide/5_297.jpg", 99, "../gal/?gal=5&Type=image&ID=297"], 
  33. ["./images/slide/4_168.jpg", 101, "../gal/?gal=4&Type=image&ID=168"], 
  34. ["./images/slide/5_277.jpg", 111, "../gal/?gal=5&Type=image&ID=277"], 
  35. ["./images/slide/5_296.jpg", 103, "../gal/?gal=5&Type=image&ID=296"], 
  36. ["./images/slide/4_169.jpg", 109, "../gal/?gal=4&Type=image&ID=169"], 
  37. ["./images/slide/4_244.jpg", 110, "../gal/?gal=4&Type=image&ID=244"], 
  38. ["./images/slide/5_285.jpg", 112, "../gal/?gal=5&Type=image&ID=285"], 
  39. ["./images/slide/3_100.jpg", 111, "../gal/?gal=3&Type=image&ID=100"], 
  40. ["./images/slide/1_103.jpg", 111, "../gal/?gal=1&Type=image&ID=103"], 
  41. ["./images/slide/1_119.jpg", 104, "../gal/?gal=1&Type=image&ID=119"], 
  42. ["./images/slide/5_253.jpg", 107, "../gal/?gal=5&Type=image&ID=253"], 
  43. ["./images/slide/4_183.jpg", 105, "../gal/?gal=4&Type=image&ID=183"], 
  44. ["./images/slide/4_171.jpg", 111, "../gal/?gal=4&Type=image&ID=171"], 
  45. ["./images/slide/2_147.jpg", 126, "../gal/?gal=2&Type=image&ID=147"], 
  46. ["./images/slide/3_115.jpg", 116, "../gal/?gal=3&Type=image&ID=115"], 
  47. ["./images/slide/5_310.jpg", 113, "../gal/?gal=5&Type=image&ID=310"], 
  48. ["./images/slide/4_185.jpg", 109, "../gal/?gal=4&Type=image&ID=185"], 
  49. ["./images/slide/3_159.jpg", 108, "../gal/?gal=3&Type=image&ID=159"], 
  50. ["./images/slide/2_154.jpg", 125, "../gal/?gal=2&Type=image&ID=154"], 
  51. ["./images/slide/5_314.jpg", 107, "../gal/?gal=5&Type=image&ID=314"], 
  52. ["./images/slide/2_106.jpg", 100, "../gal/?gal=2&Type=image&ID=106"], 
  53. ["./images/slide/4_123.jpg", 103, "../gal/?gal=4&Type=image&ID=123"], 
  54. ];
  55. var Pos=0;
  56. var Len=Img.length;
  57.  
  58. var DivWidth=0;
  59. var MoreImage=0; 
  60.  
  61. function goURL(URLS)
  62. {
  63. 	document.location.href=URLS;
  64. }
  65. for(i=0;i<Len;i++)
  66. {
  67. 	DivWidth+=Img[i][1] + ImgPadding*2;
  68. 	if(MoreImage==0 && DivWidth>ParentDivLen)MoreImage=i;
  69. }
  70. function getE(id)
  71. {
  72. 	return document.getElementById(id);
  73. }
  74.  
  75. function Dr_Img(IMG)
  76. {
  77. 	return '<img src="'+ IMG[0] + '" onclick="goURL(\'' + IMG[2] + '\')">';
  78. }
  79.  
  80. function Dr_ImgArr()
  81. {
  82. 	var str='';
  83. 	for(i=0;i<Len;i++) str += Dr_Img(Img[i]);
  84. 	for(i=0;i<MoreImage;i++)str += Dr_Img(Img[i]);
  85. 	document.write(str);
  86. }
  87.  
  88. function DoSlide()
  89. {
  90. 	if(Pos==0)Pos=-1;
  91. 	divtg=getE('ChildDiv');
  92. 	Pos-=StepPixel;
  93. 	if(Pos<-DivWidth)Pos=0;
  94. 	divtg.style.left=Pos +'px';
  95. 	t=setTimeout('DoSlide()',StepTime);
  96.  
  97. }
  98.  
  99. function SlideStop()
  100. {
  101.     clearTimeout(t);
  102. }
  103. function setmouse(id)
  104. {
  105.     if(id==1)
  106.     {
  107.         DoSlide();
  108.     }
  109.     else
  110.     {
  111.         SlideStop();
  112.     }
  113. }
  114. </script>

HTML Body

HTML Syntax (Toggle Plain Text) 
  1. <div id="ParentDiv">
  2. 	<div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);">
  3.  
  4. 		<script>
  5. 			Dr_ImgArr();
  6. 		</script>
  7. 	</div>
  8. </div>
AddThis Social Bookmark Button
Reply With Quote  

Quick Reply to Thread
•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register


Other Threads in the JavaScript / DHTML / AJAX Forum
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Threaded Mode Threaded Mode
Forums | Blogs | Tutorials | Code Snippets | Whitepapers | RSS Feeds | Advertising
All times are GMT -4. The time now is 11:08 pm.
Newsletter Archive - Sitemap - Privacy Statement - Acceptable Use Policy - Contact Us
Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC