小米官网的轮播图效果

mi.rar—点击下载

$(function(){
    //大图ul
    var ul_img = $('ul.img');
    var li_img = ul_img.find('li');
    var img    = ul_img.find('img');
    //右下角li切换卡
    var ul_list = $('ul.list');
    var list_li = ul_list.find('li');
    var li_width = li_img.eq(0).width();
    var timer;
    var c = 0;
    //运行
    set_interval();
    click_li();
    mouin_out();

    //定时器
    function set_interval(){

        timer = setInterval(function(){
            //初始化如果left不是0，就变成0
            li_img.each(function() {
                if ($(this).css('left')!=0) {
                    $(this).css('left', 0);
                };
            });
            //如果c大于li的个数 = 0
            if (c==li_img.length)
                c = 0;

            tab_img_li(c);

            c++;
        }, 1500);

    }
    //控制右下切换
    function tab_img_li(c){
        //图片
        $('ul.img img').eq(c).stop().fadeIn(400);
        //选取img 除了第c个以外
        $('ul.img img').not($('ul.img img')[c]).stop().fadeOut(400);
        //li
        list_li.eq(c).addClass('active').siblings().removeClass('active');
    }

    //控制右下角数字
    function click_li(){

        list_li.click(function() {
            c = $(this).index();

            var sum = select_class();
            if (c == sum)
                return false;

            if (c > sum){
                obj_change('left',c,sum);
            }
            if (c < sum){
                obj_change('right',c,sum);
            }
        });
    }
    //改变li
    function obj_change(obj,a,b){

        if (obj=='left') {
            // alert('left')
            list_li.eq(a).addClass('active').siblings().removeClass('active');
            li_img.eq(a).find('img').show();
            li_img.eq(a).css('left', li_width).stop().animate({left: 0});
            li_img.eq(b).stop().animate({left: -li_width});
        };
        if (obj=='right') {
            // alert('right');
            list_li.eq(a).addClass('active').siblings().removeClass('active');
            li_img.eq(a).find('img').show();
            li_img.eq(a).css('left', -li_width).stop().animate({left: 0});
            li_img.eq(b).stop().animate({left: li_width});
        };

    }
    //不是c的图片隐藏
    function hide_img(c){
        $('ul.img img').not($('ul.img img')[c]).hide();
    }
    //移入移除增加删除定时器
    function mouin_out(){
        ul_img.parent().hover(function() {
            clearInterval(timer);
        }, function() {
            set_interval();
        });
    }
    //查找当前第几个li有class
    function select_class(){
        var sum = 0;
        list_li.each(function(i) {
            if ($(this).hasClass('active')) {
                sum = $(this).index();
            };
        });
        return sum;
    }
})