首先，放上慕课网的课程链接，源码是在这个课程里分享出来的，https://www.imooc.com/learn/386。
文章适合学习过这个课程的同学，再看这篇文章，可能有更深入的理解。主要是对各种this,$(this),self等的指代，这里只对js文件进行了注释，需要其它css文件以及html文件的，请到官网下载
最先看得部分应该是Carousel.init的方法，然后再从上往下看
;(function($){ var Carousel = function(poster){
//console.log(poster);由于一直不清楚这里poster和this的区别，所以我把他们打印出来了，poster就是下面init方法里面new Carousel的时候传进来的
//console.log(this); this指代的是Carousel{}
var self = this;
//保存单个旋转木马对象
this.poster = poster; //把poster的值传递给当前对象this的poster属性，值传递
this.posterItemMain = poster.find("ul.poster-list");
this.nextBtn = poster.find("div.poster-next-btn");
this.prevBtn = poster.find("div.poster-prev-btn");
this.posterItems =poster.find("li.poster-item");
if(this.posterItems.size()%2==0){
this.posterItemMain.append(this.posterItems.eq(0).clone());
this.posterItems = this.posterItemMain.children();
};
this.posterFirstItem = this.posterItems.first();
this.posterLastItem = this.posterItems.last();
this.rotateFlag = true;
//默认配置参数
this.setting = {
"width":1000, //幻灯片的宽度
"height":270, //幻灯片的高度
"posterWidth":640, //幻灯片第一帧的宽度
"posterHeight":270, //幻灯片第一帧的高度
"scale":0.9, //记录显示比例关系
"speed":500,
"autoPlay":false,
"delay":5000,
"verticalAlign":"middle" //top bottom
};
$.extend(this.setting,this.getSetting()); //把自定义的配置与默认配置合并，如果自定义配置了相同的参数，将会覆盖默认的参数，否则会保留默认参数 //设置配置参数值
this.setSettingValue();
this.setPosterPos();
//左旋转按钮
this.nextBtn .click(function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.carouseRotate("left"); //这里不能再用this.rotate();因为这里的this是button这个dom节点，所以我们要在上面保存self
};
});
//右旋转按钮
this.prevBtn .click(function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.carouseRotate("right");
};
});
//是否开启自动播放
if(this.setting.autoPlay){
this.autoPlay();
this.poster.hover(function(){
window.clearInterval(self.timer);
},function(){
self.autoPlay();
}); }; };
Carousel.prototype = { //完全重写了prototype为一个对象实例，不明白的可以百度一下“prototype完全重写”
autoPlay:function(){
var self = this;
this.timer = window.setInterval(function(){
self.nextBtn.click();
},this.setting.delay); }, //旋转
carouseRotate:function(dir){
var _this_ = this;
var zIndexArr = [];
//左旋转
if(dir === "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"),
left = prev.css("left"),
top = prev.css("top");
zIndexArr.push(zIndex);
self.animate({
width:width,
height:height,
//zIndex:zIndex,
opacity:opacity,
left:left,
top:top
},_this_.setting.speed,function(){
_this_.rotateFlag = true;
});
});
//zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindex
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});
}else if(dir === "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"),
left = next.css("left"),
top = next.css("top");
zIndexArr.push(zIndex);
self.animate({
width:width,
height:height,
//zIndex:zIndex,
opacity:opacity,
left:left,
top:top
},_this_.setting.speed,function(){
_this_.rotateFlag = true;
}); });
//zIndex需要单独保存再设置，防止循环时候设置再取的时候值永远是最后一个的zindex
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});
};
},
//设置剩余的帧的位置关系
setPosterPos:function(){
var self = this;
var sliceItems = this.posterItems.slice(1),
sliceSize = sliceItems.size()/2,
rightSlice = sliceItems.slice(0,sliceSize),
level = Math.floor(this.posterItems.size()/2),
leftSlice =sliceItems.slice(sliceSize); //设置右边帧的位置关系和宽度高度top
var rw = this.setting.posterWidth,
rh = this.setting.posterHeight,
gap = ((this.setting.width-this.setting.posterWidth)/2)/level; var firstLeft = (this.setting.width-this.setting.posterWidth)/2;
var fixOffsetLeft = firstLeft+rw;
//设置左边位置关系
rightSlice.each(function(i){
level--;
rw = rw *self.setting.scale;
rh = rh *self.setting.scale
var j = i;
$(this).css({
zIndex:level,
width:rw,
height:rh,
opacity:1/(++j),
left:fixOffsetLeft+(++i)*gap-rw,
top:self.setVerticalAlign(rh)
});
});
//设置左边的位置关系
var lw = rightSlice.last().width(),
lh =rightSlice.last().height(),
oloop = Math.floor(this.posterItems.size()/2);
leftSlice.each(function(i){
$(this).css({
zIndex:i,
width:lw,
height:lh,
opacity:1/oloop,
left:i*gap,
top:self.setVerticalAlign(lh)
});
lw = lw/self.setting.scale;
lh = lh/self.setting.scale;
oloop--;
});
},
//设置垂直排列对齐
setVerticalAlign:function(height){
var verticalType = this.setting.verticalAlign,
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;
},
//设置配置参数值去控制基本的宽度高度。。。
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.nextBtn.css({
width:w,
height:this.setting.height,
zIndex:Math.ceil(this.posterItems.size()/2)
});
this.prevBtn.css({
width:w,
height:this.setting.height,
zIndex:Math.ceil(this.posterItems.size()/2)
}); this.posterFirstItem.css({
width:this.setting.posterWidth,
height:this.setting.posterHeight,
left:w,
top:0,
zIndex:Math.floor(this.posterItems.size()/2)
});
},
//获取人工配置参数
getSetting:function(){ var setting = this.poster.attr("data-setting");
if(setting&&setting!=""){
return $.parseJSON(setting);
}else{
return {};
};
} };
Carousel.init = function(posters){ //为Carousel添加方法init,传入一个posters List作为参数
var _this_ = this; //既然是为Carousel添加的方法，那么这里的this就是指代Carousel对象，可以打印出来看效果
posters.each(function(){//遍历poster List参数，遍历出来的是每一个poster HTML DOM
new _this_($(this));//把每一个遍历出来的 poster HTML DOM 对象变成jQuery对象，再new 新的Carousel对象出来，这样页面上各个轮播区域就会互不相关，并且new出来的对象拥有了Carousel对象所拥有的所有属性和方法，所以能实现轮播效果(变成jQuery对象主要是为了接下来的用jQuery的方法，first()之类的)
});
};
window["Carousel"] = Carousel;
})(jQuery);
