Web Hosting Deals Holiday Logo Design Webcam Chat Website Header Templates Register domain Search Engine Optimisation Web Hosting
Go Back   Talk Mania Forum > Programming / Scripting / Coding
The very simply way to make a image slider by Javascript The very simply way to make a image slider by Javascript
Register Blogs FAQ Members List Calendar Search Today's Posts Mark Forums Read

Programming / Scripting / Coding Got a question about : PHP / Perl / Java / JavaScript / CGI Scripts / JavaScript coding. Ask here! We'll get you the answers !

Image
Buy Sell Downloads

Reply
 
Submit Tools LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 05-17-2008, 08:53 AM
Junior Member
  
Join Date: May 2008
Posts: 1
o0DarkEvil0o is on a distinguished road
The very simply way to make a image slider by Javascript
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
Code:
<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
Code:
<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>
HTML Body

Code:
<div id="ParentDiv">
	<div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);">

		<script>
			Dr_ImgArr();
		</script>
	</div>
</div>

Last edited by o0DarkEvil0o; 05-18-2008 at 10:14 PM. Reason: Edit some code
Reply With Quote
  #2 (permalink)  
Old 05-17-2008, 10:41 AM
VIP Member
  
Join Date: Mar 2008
Location: United Kingdom
Posts: 163
Robbb is on a distinguished road
Send a message via MSN to Robbb Send a message via Skype™ to Robbb
thanks for sharing, may use this some time
Reply With Quote
  #3 (permalink)  
Old 05-18-2008, 02:13 AM
Member
  
Join Date: May 2008
Posts: 30
tutmaster is on a distinguished road
i am working right now for a new website, and for sure i will use your technique. very nice
Reply With Quote
  #4 (permalink)  
Old 06-29-2008, 09:19 PM
Junior Member
  
Join Date: Jun 2008
Posts: 10
narkoman is on a distinguished road
thank..

but where do i need to write the style,javascript?
Reply With Quote
  #5 (permalink)  
Old 09-12-2008, 01:57 PM
ghc ghc is offline
Junior Member
  
Join Date: Mar 2007
Posts: 27
ghc is on a distinguished road
Great........
Reply With Quote
  #6 (permalink)  
Old 09-15-2008, 07:29 PM
Member
  
Join Date: Jul 2007
Posts: 38
Dj_Emin is on a distinguished road
wow,nice thats what i was looking for cheers.
Reply With Quote
  #7 (permalink)  
Old 09-17-2008, 06:48 PM
Junior Member
  
Join Date: Sep 2008
Posts: 25
thogn83 is on a distinguished road
Nice. I will try it. Thx
Reply With Quote
  #8 (permalink)  
Old 09-24-2008, 02:33 PM
Junior Member
  
Join Date: Sep 2008
Posts: 13
rami2000s is on a distinguished road
thanksssssssssssssssssssssssssssss
Reply With Quote
  #9 (permalink)  
Old 10-23-2008, 11:18 AM
Junior Member
  
Join Date: Oct 2008
Posts: 17
Flance is on a distinguished road
Nice one **BOOKMARK**
Reply With Quote
  #10 (permalink)  
Old 10-31-2008, 12:36 PM
Member
  
Join Date: Sep 2007
Posts: 50
pakistanboy is on a distinguished road
Hello,
How are you,
But if I want to keep 12 pictures on my div and I want to change it every month each picture
such pic1 for january
pic2 for feb, etc.
how can we do it.

Thankyou,
Regards,
Pakistan Boy,

http://www.PakistanGiftsMall.com

http://www.PakistanGiftsShop.com

Reply With Quote
Reply

Bookmarks

« Previous Thread | Next Thread »
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump


All times are GMT +2. The time now is 06:53 PM.

Contact Us - Talk Mania Forum - Archive - Top

Fake ID

Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
SEO by vBSEO 3.2.0 RC8
Forums Copyright © Talk-Mania.com