Webmaster Forum


Go Back   Webmaster Forum > Web Development > Web Design Lobby
The very simply way to make a image slider by Javascript The very simply way to make a image slider by Javascript
Register Rules/FAQ Search Today's Posts Mark Forums Read

Web Design Lobby Forum for general web design issues not specific to scripting or graphics.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 05-16-2008, 02:29 PM
Junior Member
  
Join Date: 05-15-08
Posts: 7
iTrader: 0 / 0%
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= 
[
["./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>
 
Reply With Quote
  #2 (permalink)  
Old 05-16-2008, 03:33 PM
HTMLBasicTutor's Avatar
Super Moderator
Latest Blog:
What About Nofollow Links?

  
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 18,098
iTrader: 5 / 100%
Won't run here. There's scripting errors.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #3 (permalink)  
Old 05-16-2008, 11:46 PM
Junior Member
  
Join Date: 05-15-08
Posts: 7
iTrader: 0 / 0%
I don't know hou do you make script, you can check my demo link and view source for free. My Script works on IE 7 and FF.
 
Reply With Quote
  #4 (permalink)  
Old 05-17-2008, 12:13 AM
HTMLBasicTutor's Avatar
Super Moderator
Latest Blog:
What About Nofollow Links?

  
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 18,098
iTrader: 5 / 100%
I did use the demo link to see how it looks. I get 2 script errors as the page loads and no images.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #5 (permalink)  
Old 05-17-2008, 12:40 AM
Junior Member
  
Join Date: 05-15-08
Posts: 7
iTrader: 0 / 0%
, which browser you use? Those error if occurs can be solved by make a script check if all images loaded. May be your adsl line is slow.

For more comment, please PM me on YM: o0DarkEvil0o
Thank for all!
 
Reply With Quote
  #6 (permalink)  
Old 05-17-2008, 01:22 AM
Junior Member
  
Join Date: 05-15-08
Posts: 7
iTrader: 0 / 0%
Thank For Not
I have checked and found those error on array image, i fixed it and now the script run fine, thank you again!
I cant edit the first post, so I change this to:
Code:
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"]
);
 
Reply With Quote
  #7 (permalink)  
Old 05-17-2008, 01:40 AM
gammaRascal's Avatar
Artist & Motion Designer
Latest Blog:
None

  
Join Date: 05-31-04
Location: RI
Posts: 6,543
iTrader: 10 / 100%
Nothing happens which I load the page. Using ie7.
 
Reply With Quote
  #8 (permalink)  
Old 05-17-2008, 01:57 AM
Junior Member
  
Join Date: 05-15-08
Posts: 7
iTrader: 0 / 0%
Sorry, I just upload new change to host, please check for free
http://boy.us.com/Code/slide.php
Thank for Comment!
 
Reply With Quote
  #9 (permalink)  
Old 05-17-2008, 01:01 PM
HTMLBasicTutor's Avatar
Super Moderator
Latest Blog:
What About Nofollow Links?

  
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 18,098
iTrader: 5 / 100%
Ok, part 1 works now. But when I click an image in the row, I get an error when loading your next page.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #10 (permalink)  
Old 05-18-2008, 09:36 AM
Junior Member
  
Join Date: 05-15-08
Posts: 7
iTrader: 0 / 0%
That simply is example. when you click on an image, function goURL(URL) called, URL is address of site or page that you want to go.

thank for note!
 
Reply With Quote
  #11 (permalink)  
Old 05-18-2008, 10:25 PM
hrvoje461's Avatar
Contributing Member
Latest Blog:
None

  
Join Date: 08-12-06
Posts: 58
iTrader: 0 / 0%
It works fine now after you have fixed errors.
 
Reply With Quote
  #12 (permalink)  
Old 05-18-2008, 10:41 PM
Contributing Member
Latest Blog:
None

  
Join Date: 02-06-08
Posts: 91
iTrader: 0 / 0%
thanks for slider
__________________
Baby names
World recipes
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Web Design Lobby

Reply

« Previous Thread | Next Thread »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
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 Off
Pingbacks are Off
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Make PNG image transparent in IE Julie Coding Forum 3 09-27-2007 10:10 AM
Missing browser slider jonasops Coding Forum 3 03-13-2007 10:48 AM
[JavaScript] Checking if the image is loaded mess_alex Coding Forum 1 09-26-2006 04:57 PM
is there such a thing as a fade rotating image javascript? drew68 Coding Forum 8 09-14-2006 01:44 AM
Make SE bots ignore JavaScript snout Coding Forum 9 05-27-2006 07:33 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


Site Navigation: v7n Home .::. Graphics .::. Scripts .::. V7N Web Directory .::. V7N Technology Blog .::. V7N Affiliate Program .::. Advertise

All times are GMT -7. The time now is 03:44 PM.
Powered by vBulletin
Copyright © 2000-2013 Jelsoft Enterprises Limited.
Copyright © 2003 - 2013 Escalate Media LP
Affiliate Disclosure - Privacy - Contact Us - Internet Marketing - Top

Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.