Add and remove class

I made a simpler example of what you want, it's in jsfiddle , basically by clicking the , you hide the descriptions and apply visibility to the corresponding elements - description and image. See if the example below approaches what you want to do.

jQuery

$(document).ready(function()
{
    $("button").click(function() {
        // id do elemento clicado
        id = $(this).attr( 'id' );

        // exibe / oculta descrições
        $('.description').addClass('none');
        $('#description'+id).removeClass('none').addClass('block');

        // exibe / oculta imagens
        $('.image').addClass('none');
        $('#img'+id).removeClass('none').addClass('block');
    });
});

HTML

<div id="banners">
    <img id="img1" src="..." class="image block">
    <img id="img2" src="..." class="image none">
    <img id="img3" src="..." class="image none">

    <div id="description1" class="description">[1] Bla bla bla</div>
    <div id="description2" class="description none">[2] Bla bla bla</div>
    <div id="description3" class="description none">[3] Bla bla bla</div>

    <button id="1">Banner 1</button>
    <button id="2">Banner 2</button>
    <button id="3">Banner 3</button>
</div>

CSS

.block{display:block}
.none{display:none}

If you have as many buttons as pictures and the names have a pattern like in your jsFiddle, you can do so:

$('#botoes > div').each(function (i) {
    $(".botao" + i).click(function () {
        $('.ativo').removeClass('ativo').addClass('block');
        $("#banner" + i).addClass('ativo').removeClass('block');
    });
});

In this way each .botão(numero) will change the classes of each #banner(mesmo numero) .

Now in your CSS you can simplify the buttons if they are the same. Instead of having a CSS for each class .botao1 , .botao2 , etc you can use:

#botoes > div {
    width: 20px;
    float: left;
    height: 20px;
    margin-left: 10px;
    background-color: #333333;
    cursor: pointer;
}

You can further simplify and use the element's own indexes, without having to define IDs to identify them:

HTML:

<div id="banners">
    <img src="http://png-5.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_1.png"><imgsrc="http://png-3.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_2.png">
    <img src="http://png-4.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_3.png"><div>[1]Blablabla</div><div>[2]Blablabla</div><div>[3]Blablabla</div><hr><button>Banner1</button><button>Banner2</button><button>Banner3</button></div>

Jquery:

$(document).ready(function(){$('#bannersimg:not(:eq(0)),#bannersdiv:not(:eq(0))').each(function(){$(this).hide();});$("button").click(function () {
        $('#banners img, #banners div').hide();
        $('#banners img:eq(' + $(this).index('button') + '), #banners div:eq(' + $(this).index('button') + ')').show();
    });
});

See in JSFiddle

PS: To save work I stole blatantly the basic code of Pope Charlie ... heheh