jquery 轮播图

slider.js

(function(){
    /**
        parent //父容器
        changeTime //每次间隔几秒切换下一条
        leaveTime //鼠标从小图上离开过后几秒继续切换
        index //从第几个开始
        changeFn //新的显示完全后的回调
        hoverFn//鼠标移到小图上的回调
        initFn//初始化完成后的回调
        dataFormat //数据格式化函数
    */
    var def = {
        changeTime : 5000,
        leaveTime : 5000,
        index : 0,
        dataFormat : function(obj){
            return obj;
        }
    }
    function Slider(opt){
        opt = opt || {};
        for(var p in def){
            if(opt[p] === undefined){
                opt[p] = def[p];
            }
        }
        this.opt = opt;
        this.data = [];
        this.idx = this.opt.index || 0;
        this.imgArr = [];
        this.navArr = [];
        this.opt.parent && (this.opt.parent.innerHTML = '');
    }
    Slider.prototype.setData = function(data){
        /**
        * img
        * thumb
        * title
        * url
        * rgb
        */
        for(var i=0;i<data.length;i++){
            this.data.push(this.opt.dataFormat(data[i]));
        }
    }
    Slider.prototype.init = function(){
        var parentDom = this.opt.parent;
        parentDom.className = 'slide_imgs';
        var imgCon = this.imgCon = document.createElement('div');
        imgCon.className = 'imgs_list';
        var navCon = this.navCon = document.createElement('div');
        navCon.className = 'item_points';
        parentDom.appendChild(imgCon);
        parentDom.appendChild(navCon);
        this.createImg();
        this.createThumb();
        this.go(this.opt.index);
        this.opt.initFn && this.opt.inifFn(this);
    }
    Slider.prototype.createImg = function(){
        var list = this.data , temp ;
        for(var i=0;i<list.length;i++){
            temp = document.createElement('a');
            temp.className = 'img_item';
            // temp.style.backgroundColor = 'rgb('+list[i].rgb+')';
            temp.style.display = this.opt.index == i ? 'block' : 'none';
            if(list[i].url && list[i].url != '#' && list[i].url.indexOf('javascript') == -1){
                temp.setAttribute('href',list[i].url);
                temp.setAttribute('target','_blank');
            }else{
                temp.setAttribute('href','javascript:;');
            }
            temp.style.background = 'url('+list[i].img+') no-repeat center center';
            temp.onclick = function(){
                this.blur();
            }
            this.imgCon.appendChild(temp);
            this.imgArr.push(temp);
            temp.setAttribute('title',list[i].title);
        }
    }
    Slider.prototype.createThumb = function(){
        var list = this.data , temp , border , img , that = this , len = list.length;
        for(var i=0;i<len;i++){
            temp = document.createElement('a');
            temp.className = 'point';
            (function(idx){
                var _idx = idx;
                $(temp).hover(function(){
                    if(idx == that.idx) return;
                    if(that.timer){
                        clearTimeout(that.timer);
                    }
                    that.go(idx,true);
                    that.opt.hoverFn && that.opt.hoverFn.call(that,list[idx]);
                },function(){
                    if(that.timer){
                        clearTimeout(that.timer);
                    }
                    that.timer = setTimeout(function(){
                        if(idx == len -1){
                            _idx = 0;
                        }else{
                            _idx ++;
                        }
                        that.go(_idx);
                    },that.opt.leaveTime);
                })
            })(i);
            this.navCon.appendChild(temp);
            this.navArr.push(temp);
            temp.setAttribute('title',list[i].title);
        }
    }
    Slider.prototype.next = function(){
        var idx = this.idx + 1;
        this.go(idx);
    }
    Slider.prototype.prev = function(){
        var idx = this.idx - 1;
        this.go(idx);
    }
    Slider.prototype.go = function(idx,handle){
        var len = this.data.length, that = this;
        idx = Math.min(Math.max(0,idx),this.data.length - 1);
        if(len == 1) {
            this.navArr[idx].className = 'point cur';
            return;
        }
        if(this.timer){
            clearTimeout(this.timer);
        }
        var old = this.idx;
        if(this.imgArr[old]){
            $(this.imgArr[old]).stop(0,0).animate({opacity:0},200,function(){
                $(this).hide();
            });
            this.navArr[old].className = 'point';
            this.imgArr[idx].style.display = 'block';
            $(this.imgArr[idx]).css('opacity',0);
            $(this.imgArr[idx]).stop(0,0).animate({opacity:1},200,function(){
                that.opt.changeFn && that.opt.changeFn(that,that.data(idx));
            });
            this.navArr[idx].className = 'point cur';
            this.idx = idx;
            if(!handle){
                this.timer = setTimeout(function(){
                    if(idx == len -1){
                        idx = 0;
                    }else{
                        idx ++;
                    }
                    that.go(idx);
                },this.opt.changeTime);
            }
        }
    }
    window.Slider = Slider;
})();

index.js

$(function(){
    function createBanner(){
        var list = [
            {img : '/callcenter.jpg',url:'',title:'客服中心'},
            {img : '/imprestcenter.jpg',url:'',title:'充值中心'},
            {img : '/safecenter.jpg',url:'',title:'安全中心'},
            {img : 'http://gameapi.xiaoyou-game.com/static/usercenter/usercenter.jpg',url:'',title:'用户中心'}
        ]
        var slider = new Slider({
            parent : $('.slide_imgs')[0]
        });
        slider.setData(list);
        slider.init();
    }
    createBanner();
})

html

<div class="slide_imgs">
</div>

1、在html里面占位置，

2、index.js将轮播图信息写好，

3、新建一个Slider对象，并实例化即可。