1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

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,276
    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,276
    Likes Received:
    364
    Trophy Points:
    83
  5. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,276
    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