自己随意写了个简单的依赖jquery的轮播图

//轮播图
    function Switcher(obj){
        this.box = $(obj.box);
        this.width = this.box.width();
        this.banner = $(obj.banner);
        this.list = this.banner.find('li');
        this.index = $(obj.btn).find('li').index();
        this.btn = $(obj.btn);
        this.prev1=$(obj.prev);
        this.next1=$(obj.next);
        this.timer = obj.timer;
        this.autoplay = obj.autoplay;
        this.a=0;
        this.b=0;
        this.d = this.list.length;
        this.ani=obj.ani;
        this.change = obj.change;
        this.init();
    }
    Switcher.prototype={
        init:function(){
            this.play = null;
            this.fun();
            if(this.autoplay==true){this.auto();}
            this.prev();
            this.next();
            this.list.eq(0).css({zIndex:1});
            this.btn.find('li').eq(0).addClass(this.change);
        },
        fun:function(){
            var _this = this;
            for(var i = 0;i<_this.list.length;i++){
                _this.btn.append('<li></li>')
            }
            _this.btn.find('li').on('click',function(){
                clearInterval(_this.play);
                _this.a = $(this).index();
                $(this).addClass(_this.change).siblings().removeClass(_this.change);
                _this.list.eq(_this.a).css(comm.blind_event(_this.ani,0.8,0)).show().siblings().hide();
            });
        },
        auto:function(){
            var _this = this;
            this.play = setInterval(function(){
                _this.a++;
                if(_this.a<_this.d){
                    if(_this.a==_this.d-1){_this.a=-1}
                    _this.btn.find('li').eq(_this.a).addClass(_this.change).siblings().removeClass(_this.change);
                    _this.list.eq(_this.a).css(comm.blind_event(_this.ani,0.8,0)).show().siblings().hide();
                }
            },_this.timer);
        },
        prev:function(){
            var _this=this;
            _this.prev1.click(function(){
                clearInterval(_this.play);
                _this.a--;
                if(_this.a==-1){_this.a=_this.d-1}
                $('.m-wap .number .show .fen').text(_this.a+1);
                _this.btn.find('li').eq(_this.a).addClass(_this.change).siblings().removeClass(_this.change);
                _this.list.eq(_this.a).css(comm.blind_event(_this.ani,0.8,0)).show().siblings().hide();
            });
        },
        next:function(){
            var _this=this;
            _this.next1.click(function(){
                clearInterval(_this.play);
                _this.a++;
                if(_this.a==_this.d){_this.a=0}
                $('.m-wap .number .show .fen').text(_this.a+1);
                _this.btn.find('li').eq(_this.a).addClass(_this.change).siblings().removeClass(_this.change);
                _this.list.eq(_this.a).css(comm.blind_event(_this.ani,0.8,0)).show().siblings().hide();
            });
        }
    };
调用方法很简单，需要依赖animate来自己添加什么显示效果 也可以自己编辑关键帧
此方法只适合pc端并且不能获取index来判断是第几张，适合宣传页面用
 var zhanglei = new Switcher({
        box: $('.banner'),//最外层div
        banner: $('.banner .content'),//包裹图片的ul
        timer: 2500,//切换图片时间
        prev:$('.banner').find('.prev'),//前进
        next:$('.banner').find('.next'),//后退
        ani:'fadeIn'
    });