通过jquery js 实现幻灯片切换轮播效果

观察各个电商网址轮播图的效果，总结了一下主要突破点与难点

1.->封装函数的步骤与具体实现

2->this关键字的指向

3->jquery js函数熟练运用 如animate

4->各个图片的位置关系分析

5->正确的json格式

实现步骤

　　封装jq函数四个步骤：

　　1　　　　----->构造函数   var Carousel = function(poster){}　　//poster 为传入的类  具体为一个ul

　　2　　　　----->Carousel.prototype上写函数

　　3　　　　----->Carousel.init new出每一个对象

　　4　　　　----->window["Carousel"] = Carousel;  添加到window上

先是主要的html结构

<!-- 正确的json对象 属性有双引号 -->
<div class="J_Poster poster-main" data-setting='{
                                                 "width":1000,
                                                 "height":270,
                                                 "posterHeight":270,
                                                 "posterWidth":640,
                                                 "scale":0.9,
                                                 "speed":300,
                                                 "verticalAlign":"middle",                     "autoPlay":true,
                                                 "delay":2000
                                                }'>
    <div class="poster-btn poster-prev-btn"></div>
    <ul class="poster-list">
        <li class="poster-item"><a href="#"><img src="img01/1.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/2.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/3.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/4.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/5.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/2.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/3.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/4.jpg" width="100%"></a></li>
        <li class="poster-item"><a href="#"><img src="img01/5.jpg" width="100%"></a></li>
    </ul>
    <div class="poster-btn poster-next-btn"></div>
</div>                                     

　　下面是具体实现

Carousel.prototype = {

        //获取人工配制参数方法
    getSetting:function(){},

        //根据配制参数去控制高度，宽度。。
        setSettingValue:function(){},

           //垂直方向位置设置
        setVerticalAlign:function(height){},

    //设置剩余帧位置关系
        setPosterPos:function(){},

    //旋转函数
        carouselRotate:function(arr){},

        //自动播放函数
        autoPlayFn:function(){}

};    

　　1.构造函数 Carousel

var Carousel = function(poster){

    var self = this;
    //保存单个旋转木马对象
    this.poster = poster;
    this.posterItemMain = poster.find("ul.poster-list");// 保存poster中ul对象
    //保存上下切换按钮
    this.prevBtn = poster.find("div.poster-prev-btn");
    this.nextBtn = poster.find("div.poster-next-btn");
    this.posterItems = this.posterItemMain.find("li");//所有li的个数
    this.posterFirstItem = this.posterItems.first();//保存第一帧
    this.posterLastItem  = this.posterItems.last();
    this.rotateFlag = true;                    //旋转结束的标志 若不设置 多次点击时会出现bug

    //默认配置参数
    this.setting = {
                    "width":900,            //幻灯片宽度
                     "height":270,            //幻灯片高度
                     "posterHeight":270,        //幻灯片第一帧宽度
                     "posterWidth":640,        //幻灯片第一帧高度
                     "scale":0.9,            //幻灯片比例
                     "speed":500,            //切换速度
                     "autoPlay":true,        //是否自动播放
                     "delay":2000,            //自动播放的延迟时间
                     "verticalAlign":"middle"//图片垂直方向上显示的位置
                    };
    $.extend(this.setting,this.getSetting());

    this.setSettingValue();
    this.setPosterPos();
    // 按钮事件
    this.prevBtn.click(function(){
        if(self.rotateFlag){
            self.rotateFlag = false;
            self.carouselRotate("left");
        }

    });
    this.nextBtn.click(function(){
        if(self.rotateFlag){
            self.rotateFlag = false;
            self.carouselRotate("right");
        }
    });
    if(self.setting.autoPlay){
        this.poster.hover(function(){//hover 为jq函数
            window.clearInterval(self.timer);
        },function(){
            self.prevBtn.click();
        });
        self.autoPlayFn();
    }

};

　　

　　主要获取对象：　　carousel对象本身，幻灯片区域，幻灯片的上下切换按钮，幻灯片的每一张图片，幻灯片的第一帧与最后一帧

　　默认的配置参数：　如果有html中有多块切换区域时，要修改不同的切换样式，在html下修改date-setting属性即可，具体获取到人工配制参数的函数将在prototype下实现

　　事件的执行：　　　1.上下按钮切换点击事件（执行旋转函数），　　2.是否自动播放

Carousel.prototype上函数的实现

　　1.获取来自htnl中data-setting的人工配制参数　　

　　　　　　　　getSetting 　　　　//主要注意json格式下的属性要用双引号才能读取

getSetting:function(){
        var setting = this.poster.attr("data-setting");
        if(setting&&setting!=""){
            return $.parseJSON(setting);// 传出json对象
        }
        else{
            return {};
        }
        /*return setting;*/
    }

　　2.根据配置参数去控制幻灯片区域，第一帧的位置关系，上下切换按钮的样式，主要设置宽高 z-index left值

　　　　　　　　setSettingValue

	setSettingValue:function(){
		this.poster.css({
						width:this.setting.width,
						height:this.setting.height
						});
		this.posterItemMain.css({
								width:this.setting.width,
								height:this.setting.height

								});
		var w = (this.setting.width-this.setting.posterWidth)/2 //按钮的宽度
		this.prevBtn.css({
						width:w,
						height:this.setting.height,
						zIndex:Math.ceil((this.posterItems.size()/2))//按钮的层级关系
						});
		this.nextBtn.css({
						width:w,
						height:this.setting.height,
  						zIndex:Math.ceil((this.posterItems.size()/2))
						});
		this.posterFirstItem.css({
						left:w,
						zIndex:Math.floor((this.posterItems.size()/2))
						});

	},

　　

　　3.剩余帧的位置关系，样式，主要通过获取第一帧的位置关系来确定其他帧的关系//通过slice函数将区域分为左右区域，然后左右区域每一帧分别修改z-index left top opacity width height

　　　　　　　　setPosterPos{

　　　　　　　　　　　　　　　　rightSlice.each(function(){})

　　　　　　　　　　　　　　　　leftSlice.each(function(){})

　　　　　　　　　　　　　　　}

setPosterPos:function(){
        var sliceItems = this.posterItems.slice(1);
        var sliceSize = sliceItems.size()/2
        var rightSlice = sliceItems.slice(0,sliceSize);
        //
        var leftSlice = sliceItems.slice(sliceSize);

        var  level = Math.floor((sliceItems.size()/2));

        //每张幻灯片的间距
        var gap = ((this.setting.width-this.setting.posterWidth)/2)/level;

        var self = this;
        //右边帧的宽度高度
        var  rw = this.setting.posterWidth;
        var  rh = this.setting.posterHeight;

        var firstLeft = (this.setting.width-this.setting.posterWidth)/2;
        var fixoffsetLeft = firstLeft+rw;

    //设置右边帧的宽度高度透明度
    rightSlice.each(function(i){
        //右边每一帧相应的宽度透明度的值
        level--;
        rw = self.setting.scale*rw;
        rh = self.setting.scale*rh;
        var j = i;

        //右边帧的位置

        $(this).css({
                width:rw,
                zIndex:level,
                height:rh,
                top:self.setVerticalAlign(rh),
                left:fixoffsetLeft+(++i)*gap-rw,
                opacity:1/++j

                });
    });

    var lw = rightSlice.last().width(),
        lh = rightSlice.last().height();
    var oloop =  Math.floor((sliceItems.size()/2));
    leftSlice.each(function(i){
        //左边帧每一帧的宽度高度

        $(this).css({
                width:lw,
                zIndex:i,
                height:lh,
                top:self.setVerticalAlign(lh),
                left:i*gap,
                opacity:1/oloop

                });
        lw = lw/self.setting.scale;
        lh = lh/self.setting.scale;
        oloop--;
    });

    },

　　4.垂直方向位置设置，即幻灯片区域的将垂直居上 垂直居中 垂直居底显示

　　　　　　　　setVerticalAlign(height)// height 为data-setting中传来的verticalAlign

    //垂直方向位置设置
    setVerticalAlign:function(height){
        var verticalType = this.setting.verticalAlign;
        var top = 0;
        if(verticalType === "middle"){
            top = (this.setting.height-height)/2;
        }else if(verticalType === "top"){
            top = 0;
        }else if(verticalType === "bottom"){
            top = this.setting.height-height;
        }else{
            top = (this.setting.height-height)/2;
        };
        return top;
    },

5.旋转函数的编写 　　注意是否获取到DOM结点用get(0)方法

    //旋转函数
    carouselRotate:function(arr){

        var _this_ = this;
        var zIndexArr = [];
        if(arr==="left"){
            this.posterItems.each(function(){
                var self = $(this),
                    prev = self.prev().get(0)?self.prev():_this_.posterLastItem,
                    width = prev.width(),
                    height = prev.height(),
                    zIndex = prev.css("zIndex"),
                    opacity = prev.css("opacity"),
                    top = prev.css("top"),
                    left = prev.css("left");
                    zIndexArr.push(zIndex);
                self.animate({
                    width:width,
                    height:height,
                    //zIndex:zIndex,
                    opacity:opacity,
                    top:top,
                    left:left
                },_this_.setting.speed,function(){
                    _this_.rotateFlag = true;
                });
            });
            this.posterItems.each(function(i){
                $(this).css("zIndex",zIndexArr[i]);
            });
        }else if(arr==="right"){
            this.posterItems.each(function(){
                var self = $(this),
                    next = self.next().get(0)?self.next():_this_.posterFirstItem,
                    width = next.width(),
                    height = next.height(),
                    zIndex = next.css("zIndex"),
                    opacity = next.css("opacity"),
                    top = next.css("top"),
                    left = next.css("left");
                    zIndexArr.push(zIndex);

                self.animate({
                    width:width,
                    height:height,
                    zIndex:zIndex,
                    opacity:opacity,
                    top:top,
                    left:left
                },_this_.setting.speed,function(){
                    _this_.rotateFlag = true;
                });
            });
            this.posterItems.each(function(i){
                $(this).css("zIndex",zIndexArr[i]);
            });//先切换页面 再过渡其他元素

        }
    },

6.自动播放函数编写　　

    //自动播放函数
    autoPlayFn:function(){
        var self = this;
        this.timer = window.setInterval(function(){
            self.prevBtn.click();
        },self.setting.delay);
    },

3.new幻灯片中每一帧的实例// this指向carousel对象本身 即要实现 new Carousel(posters);

Carousel.init = function(posters){
    var _this_ = this;
    posters.each(function(){
        new _this_($(this));
    });
}

4.添加到window中

window["Carousel"] = Carousel;