how create a simple slideshow and some controll buttons.

how create a simple slideshow and some controll buttons.

Hello again,

I am trying to make this little slideshow, it works, but i can't write correct function for buttons click.
i want every time that a button is clicked, its related div display.
and then slideshow continue its way.

thank you all.

demo: http://jsfiddle.net/sabeti05/dsagcc5u/

html
  1.     <div id="slideshow">
           <div class=" hide block">
            one
           </div>
           <div class="hide">
            two
           </div>
           <div class="hide">
            three
           </div>
        </div>
        <button class="one">one</button>
        <button class="two">two</button>
        <button class="three">three</button>

css
  1. body{text-align:center}
    #slideshow {
        height: 40px;
        margin: 0 auto;
        position: relative;
        width: 100px;
    }
    #slideshow > div {
        position: absolute;
    }
    .hide {
        display: none;
    }
    .block {
        display: block;
    }


jquery
  1. $(document).ready(function(){
        setInterval(function() {
          $('#slideshow > div.block')
            .removeClass("block")
            .next()
            .addClass("block")
            .end()
            .appendTo('#slideshow');
        },  1000);
    });