JavaScript image banner timer HTML

I want to be able to make my image banner move on to the next image after a few seconds. I've tried a few things but nothing has worked. I believe I can use JavaScript to do this.

Any help will be much appreciated!

I'll put the code up:

<div id = "imageBanner">
           <div id="slideshow-wrap">
                <input type="radio" id="button-1" name="controls"     checked="checked"/>
                <label for="button-1"></label>
                <input type="radio" id="button-2" name="controls"/>
                <label for="button-2"></label>
                <input type="radio" id="button-3" name="controls"/>
                <label for="button-3"></label>
                <input type="radio" id="button-4" name="controls"/>
                <label for="button-4"></label>
                <input type="radio" id="button-5" name="controls"/>
                <label for="button-5"></label>
                <label for="button-1" class="arrows" id="arrow-1">></label>
                <label for="button-2" class="arrows" id="arrow-2">></label>
                <label for="button-3" class="arrows" id="arrow-3">></label>
                <label for="button-4" class="arrows" id="arrow-4">></label>
                <label for="button-5" class="arrows" id="arrow-5">></label>
                <div id="slideshow-inner">
                    <ul id = "slideshow">
                        <li><img style="width:100%;" src="battlefield4.png" /></li>
                        <li><img style="width:100%;" src="fifa12.png" /></li>
                        <li><img style="width:100%;" src="spiderman.png" /></li>
                        <li><img style="width:100%;" src="mario.png" /></li>
                        <li><img style="width:100%;" src="wiifit.png" /></li>
                    </ul>
                </div>
            </div>
        </div>