(function(){
    $(function () {
        var pic = $('.banner .pic'),
            btn = $('.banner .btn li'),
            index = 0,
            banner_box = $('.banner-box'),
            length = btn.length,
            timer;
        banner_box.hover(function () {
            clearInterval(timer)
        },function () {
            auto();
        });
        btn.eq(index).addClass('on');
        btn.on('click',function () {
            index = $(this).index();
            fn()
        });
        auto();
        function auto(){
            timer = setInterval(function () {
                index = ++index%length;
                fn()
            },3000);
        }
        function fn() {
            btn.eq(index).addClass('on').siblings().removeClass('on')
            pic.animate({
                "margin-left":-index*1200
            },500)
        }
    })
})();