$(document).ready(function () {
    $('#cycle').cycle(
            {
                fx: 'fade',
                next: '#flechedroite',
                prev: '#flechegauche',
                cleartype:true,
                after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
                },
                before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
                    var ImageID = nextSlideElement.id.replace("Image", "");
                    $(".puce_selected").removeClass("puce_selected");
                    $("span", "#puce" + ImageID).addClass("puce_selected");

                },
                pager: '#navigation_cycle'
            });

    var Id = 1;
    $("#navigation_cycle a").each(function () {
        $(this).prepend("<span></span>")
        $(this).attr("id", "puce" + Id)
        Id += 1;
    });

});