轮播图

$(function(){
    //获取Ul
    var ul = $('.all ul');
    var li = $(".all ol li");
    //获取所有的ul li
    var ili = $(".all ul li");
    //获取ul的宽度
    var liwidth = $(".all ul li").eq(0).width();
    //定义li的当前下标
    var _now = 0;
    //定义一个空值  接收setInterval的值
    var timeid = null;
    //获取ul下的li
    var new_li = $(".all ul li");
    //定义_now2（防止下标不会乱）
    var _now2 = 0;
    //alert(liwidth)
    li.click(function(){
        //获取当前li
        var _this = $(this);
        _now = _this.index();
        _this.addClass('current').siblings().removeClass();
        //获取当前的索引
        var new_val = _this.index();
        ul.animate({'left':-liwidth*new_val},500);
    })
    //显示图片的自动轮播
    function slider(){
            //alert(1)
            if(_now == li.size()-1){
                //当图片滚动一遍时，需要把第一张图片放在最后一张
                new_li.eq(0).css({
                    'position':'relative',
                    'left':ul.width(),
                })
                _now=0;
            }else{
                _now++;
            }
            _now2++;
            li.eq(_now).addClass('current').siblings().removeClass();
            ul.animate({'left':-liwidth*_now2},500,function(){
                //当animate运动完成后 要去除第一个li的position属性  
                if(_now==0){
                        new_li.eq(0).css('position','static')
                        //同时设置整个ul的左边距为0
                        ul.css('left','0');
                        //同时设置_now2的值为0
                        _now2 = 0;
                }
            });
        }

        timeid = setInterval(slider,3000);

        //当鼠标放在图片上时停止滚动
        $('.all').mouseover(function(){
            clearInterval(timeid);
        })

        //到鼠标离开图片时继续滚动
        $('.all').mouseout(function(){
            timeid = setInterval(slider,3000);
        })
})