1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

The new simple way to make a image slider by Javascript

Discussion in 'JavaScript and AJAX' started by o0darkEvil0o, May 23, 2008.

  1. o0darkEvil0o

    o0darkEvil0o New Member

    Joined:
    May 16, 2008
    Messages:
    3
    Likes Received:
    1
    Trophy Points:
    0
    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
    HTML:
    <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
    HTML:
    <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

    HTML:
    <div id="ParentDiv">
    	<div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);">
    
    		<script>
    			Dr_ImgArr();
    		</script>
    	</div>
    </div>
    
     
    karthikp likes this.
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,287
    Likes Received:
    364
    Trophy Points:
    83
    Really a nice one.
     
  3. o0darkEvil0o

    o0darkEvil0o New Member

    Joined:
    May 16, 2008
    Messages:
    3
    Likes Received:
    1
    Trophy Points:
    0
  4. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,287
    Likes Received:
    364
    Trophy Points:
    83
  5. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,287
    Likes Received:
    364
    Trophy Points:
    83
  6. Full Zip Hoody

    Full Zip Hoody New Member

    Joined:
    Sep 29, 2010
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Programer
    Location:
    US of A
    i like the demo, i wish i could know as much stuff as you guys do...
     
  7. karthikp

    karthikp New Member

    Joined:
    Sep 3, 2011
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    I've always wanted to make an image slider, but thought it would be quite complicated and never went through with it. I never knew it was so damn simple. Thanks for this post. :)
     

Share This Page