Image Carousel in JavaScript
In your example you're adding events inside events, this is not good idea because it creates unnecessary closures and can lead to memory leaks.

First I would cache the elements so you only query the DOM once, improving performance. Then you can create a function to hide all images, and a function to go to the next image, and reuse that function for both events:

// IIFE (Immediately invoked function expression)
// to not leak variables to global scope
(function(){
    // Cache elements
    var list = document.getElementById('list');
    var btn = document.getElementById('btn');

    var current = 0;

    // Hide all images
    function hide() {
        for (var i=0; i&lt;list.children.length; i++) {
            list.children[i].style.display = 'none';
        }
    }

    // Go to next image
    function next() {
        hide();
        list.children[current++].style.display = 'block';
        // Did we reach the end?
        if (current &gt;= list.children.length) {
            current = 0;
        }
    }

    // Reuse function
    window.onload = btn.onclick = next;
}());


Demo: http://jsfiddle.net/F5Hg7/2/