Slide divs like a slideshow, only one at a time should be visible
<p>I want to create a div slider that would have "n" number of images in it which would keep sliding in every few seconds, lets say 3 seconds, automatically. I am not very fluent with javascript. So please a detailed explanation would be very helpful. The below code also to be honest I have copied from google. I am very bad at Javascript I am trying to learn still. I know this is a platform for programmers but I am a newbie.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;title&gt;&lt;/title&gt;

&lt;script type="text/javascript" language="javascript"&gt;
//&lt;![CDATA[

window.onload=function()
{
    document.getElementById("d2").onclick = slideIt;
 document.getElementById("d3").onclick = slideIt;

};

function slideIt()
{
    var slidingDiv = document.getElementById("d1");
    var stopPosition = 50;

    if (parseInt(slidingDiv.style.left) &lt; stopPosition )
    {
        slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
        setTimeout(slideIt, 1);
    }else{
if(parseInt(slidingDiv.style.left) &lt; -150 ){
var slidingDiv3 = document.getElementById("d3");
        slidingDiv3.style.left = parseInt(slidingDiv3.style.left) + 300 + "px";
}
}
}

//]]&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="d2"&gt;click here to slide the div&lt;/div&gt;
&lt;div id="d1" style="position:absolute; left:-150px; top:30px"&gt;horizontally sliding div&lt;/div&gt;
&lt;div id="d3" style="position:absolute; left:-300px; top:30px"&gt;horizontally sliding div2&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;​
</code></pre>
