$(function () {
    var totalImage = 0;
    var totalWidth = 0;
    var anchoItem = 0;
    var anchoTo = 0;
    var intervalo;
    var contador = 1;
    var segundos = 8000; //1000 equivale a 1 seg
    var timeAnimacion = 500; //Tiempo de la animacion
  var tipoAnimacion="easeInOutCirc"; 
  
    $("#banner_frontal").append('<div class="list_item"><ul></ul></div>')

    $("#banner_frontal .images ul li").each(function (e) {
        totalWidth += $(this).width()
        totalImage = e
        anchoItem = $(this).width();
        $("#banner_frontal .list_item ul").append("<li><a href='" + e + "'>" + (e + 1) + "</a></li>")
    })

    $("#banner_frontal .list_item ul li:first").attr("class", "active")
    $("#banner_frontal .images ul").css("width", totalWidth)

    $("#banner_frontal .list_item ul li").click(function () {
  if ($(this).attr("class") == "active") {
            return false;
        }
    
        $("#banner_frontal div.list_item ul li").each(function () {
            if ($(this).attr("class") == "active") {
                $(this).attr("class", "")

            }
        })
        $(this).attr("class", "active")
        contador = $(this).index()
        $("#banner_frontal .images").stop().animate({
            scrollLeft: $(this).find("a").attr("href") * anchoItem
        },{duration:2000, easing:tipoAnimacion})
        return false;
    })


    //CREANDO INTERBALO
    intervalo = setInterval(function () {

        $("#banner_frontal div.list_item ul li:eq(" + contador + ")").click()

        if (contador == totalImage) {
            contador = 0
        } else {
            contador++;
        }

    }, segundos);

});