Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   The new simple way to make a image slider by Javascript (http://www.go4expert.com/articles/simple-image-slider-javascript-t10761/)

o0darkEvil0o 24May2008 01:58

The new simple way to make a image slider by Javascript
 
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 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
HTML 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

HTML Code:

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

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


shabbir 24May2008 08:35

Re: The new simple way to make a image slider by Javascript
 
Really a nice one.

o0darkEvil0o 24May2008 08:40

Re: The new simple way to make a image slider by Javascript
 
thank!

shabbir 2Jun2008 16:28

Re: The new simple way to make a image slider by Javascript
 
Nomination for article of the month of May

shabbir 18Jun2008 21:44

Re: The new simple way to make a image slider by Javascript
 
Quote:

Originally Posted by shabbir

Start Voting now

Full Zip Hoody 30Sep2010 01:39

Re: The new simple way to make a image slider by Javascript
 
i like the demo, i wish i could know as much stuff as you guys do...

karthikp 13Feb2012 21:14

Re: The new simple way to make a image slider by Javascript
 
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. :)


All times are GMT +5.5. The time now is 23:30.