how to slide down 1 picture every specific time and so on

i want to make slideshow and I want to be its behavior every 2 minutes slide down 1 pictures and so on , until the end of the images , and start again from the first picture .

I tried to make it and i make part of it (every 2 minutes change picture) but not slide down 1 pictures but change picture without slide down .

And one help me to make entire slideshow

My code is开发者_运维技巧 below

HTML

<div id="slideshow">
    <img src="images/slideshow.jpg" alt="" title="" />
    <img src="images/slideshow2.jpg" alt="" title="" />
    <img src="images/slideshow3.jpg" alt="" title="" />
    <img src="images/slideshow4.jpg" alt="" title="" />
    <img src="images/slideshow5.jpg" alt="" title="" />
</div>
<script type="text/javascript">
    window.onload = slideShow;
</script>

Javascript

var counter = 0;
function slideShow(){
    var fatherElem = document.getElementById('slideshow');
    var fatherChildren = fatherElem.children;
    var fatherElemScroll = fatherElem.scrollTop;
    counter++;
    if (fatherChildren.length > counter) {
        fatherElem.scrollTop += 300;
    }
    else {
        fatherElem.scrollTop = 0;
        counter = 0;
    }

    setTimeout(slideShow, 1000);
    document.getElementsByName('SearchBox')[0].value = counter;
}

I'm sorry for my big question but i'm really need help

You're manipulating scrollTop on the slideshow div by 300px every second. If your images are exactly 300px high and your div is exactly 300px high with no overflow and your div forces your images to be vertically in a row, then what your code would do is switch to the next image every second. So, in answer to your questions:

1. You have not written any code for the image to slide. Changing scrollTop by 300 is a sudden change, not a sliding change.
2. Your code changes the scrollTop value every second, not every two minutes. The second parameter to setTimeout is a value in milliseconds. If you want two minutes, you would have to set that value to (1000 * 60 * 2).

Here's your code in action on jsfiddle: http://jsfiddle.net/jfriend00/NyYpB/ with some real images.

If you want the images to actually slide, then you will have to write some animation code to slowly manipulate scrollTop from it's present value to the enxt higher value continuously over the period of time you want the animation to run.

Animation can be tricky to do well from scratch. Most people will choose to either use CSS3 animation or use an animation library (like the one in jQuery or YUI) that has already done the right kind of tweening work for you because it will be faster and probably generate a higher quality result.

Here's a working example you can see and play with using jQuery: http://jsfiddle.net/jfriend00/CyCDD/.

HTML:

<div id="slideshow">
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130938160417/1190079664_chLyW-Ti.jpg" alt="" title="" />
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050422/1190083195_Az688-Ti.jpg" alt="" title="" />
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050421/1190083481_C3nag-Ti.jpg" alt="" title="" />
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070426/1190078330_umaLY-Ti.jpg" alt="" title="" />
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070425/1190080772_RmZX2-Ti.jpg" alt="" title="" />
</div>

CSS:

#slideshow {width: 100px; height: 66px; font-size: 0; overflow: hidden;}

Javascript:

var counter = 0;

function gotoNextSlide() {
    var $ss = $("#slideshow");
    if (counter >= $ss.children().length - 1) {
        counter = 0;
    } else {
        counter++;
    }
    $ss.animate({'scrollTop': (counter * 66) + 'px'}, 1000);

}

setInterval(gotoNextSlide, 3000);