首先是在这个项目里面用到了一些jquery的知识，为了方便使用，先学习jquery的基础知识。比较深的知识，以后用到再说。
因为jQuery本身就是JavaScript，只不过是把JavaScript代码包装成拿过来就能实现特定功能的代码库！例如，我们想改变页面中所有段落标签中的文本内容：
javascript代码：
var page_ps=document.getElementTagNmae("p");
for(var i = 0; i<page_ps.length;i++){
page_ps[i].innerHTML = "hello imooc!";
}
jQuery代码：
$("p").html("hello imooc!");
以上两段代码完成的功能是一样的。由此可以看出，jQuery更加的简洁方便，我们在处理DOM时不必关心功能的实现细节。
在jQuery中$()方法等价于jQuery()方法,前者比较常用，是后者的简写。一般只有在$()与其它语言冲突时才会使用jQuery()方法。
document.ready()和传统的方法相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。
(function(){})()
相当于先定义function xx(){}，后调用xx();()是最高优先级的，所以先执行function(){}，这个定义了一个匿名函数，等于xx=function(){}接着就是调用xx()了;
给个例子
function f1(a){
alert(a);
}
function f2(a){
return function () {
alert(a);
}
}
这里的var x=f2 就等于把函数传递给了f2,然后要执行这个函数,就必须加()也就是x(); 也就是f2()
(function f2($) {
return function () {
alert(a);
}
})(a);
prototype 属性使您有能力向对象添加属性和方法。
$(function(){ //在页面加载时比window.load更快的执行
var carousel = newCarousel($("J_Poster").eq(0));//创建一个旋转木马对象，获取对象的第一个值，J_Poster中是个数组有多个值
});
Carousel.init($("J_Poster"));//获取html页面里所有的旋转木马类，上面的只能获取一个
有关用到的javascript中js闭包的问题：
当function里嵌套function时，内部的function可以访问外部function里的变量。
function foo(x) {
var tmp = 3;
function bar(y) {
alert(x + y + (++tmp));
}
bar(10);
}
foo(2);
不管执行多少次，都会alert 16，因为bar能访问foo的参数x，也能访问foo的变量tmp。但，这还不是闭包。当你return的是内部function时，就是一个闭包。内部function会close-over外部function的变量直到内部function结束。
function foo(x) {
var tmp = 3;
return function (y){
alert(x + y + (++tmp));
}
}
var bar = foo(2); // bar 现在是一个闭包
bar(10);
上面的脚本最终也会alert16，因为虽然bar不直接处于foo的内部作用域，但bar还是能访问x和tmp。但是，由于tmp仍存在于bar闭包的内部，所以它还是会自加1，而且你每次调用bar时它都会自加1.上面的x是一个字面值（值传递），和JS里其他的字面值一样，当调用foo时，实参x的值被复制了一份，复制的那一份作为了foo的参数x。
那么问题来了，JS里处理object时是用到引用传递的，那么，你调用foo时传递一个object，foo函数return的闭包也会引用最初那个object！
function foo(x) {
var tmp = 3;
return function (y) {
alert(x + y +tmp);
x.memb = x.memb ? x.memb+ 1 : 1;
alert(x.memb);
}
}
var age = new Number(2);
var bar = foo(age); // bar 现在是一个引用了age的闭包
bar(10);
不出我们意料，每次运行bar(10)，x.memb都会自加1。但需要注意的是x每次都指向同一个object变量——age，运行两次bar(10)后，age.memb会变成2.
下面是从慕课网上学习到的源码是javascript语言：
;(function($){
var Carousel = function(poster){
var self = this;
//保存单个旋转木马对象
this.poster = 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.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 = {
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){
var _this_ = this;
posters.each(function(){
new _this_($(this));
});
};
window["Carousel"] = Carousel;
})(jQuery);
关于css：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content: ;}
abbr,acronym{border:0;}
body{color:#666; background-color:#fff;font: 12px/1.5 '微软雅黑',tahoma,arial,'Hiragino Sans GB',宋体,sans-serif;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1;}
/*旋转木马必要样式*/
.poster-main{ position:relative;width:800px;height:270px;}
.poster-main a,.poster-main img{display:block;}
.poster-main .poster-list{width:800px;height:270px;}
.poster-main .poster-list .poster-item{ position:absolute;left:0;top:0;}
.poster-main .poster-btn{ position:absolute;top:0;width:100px;height:270px; z-index:10; cursor:pointer; opacity:0.8}
.poster-main .poster-prev-btn{left:0; background: url(btn_l.png) no-repeat center center;}
.poster-main .poster-next-btn{right:0; background: url(btn_r.png) no-repeat center center;}
关于HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转木马</title>
<link type="text/css" rel="stylesheet" href="carousel.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="carousel.js"></script>
</head>
<body style="padding:50px;">
<div class="J_Poster poster-main" data-setting='{"width":1000,"height":270,"posterWidth":640,"posterHeight":270,
"scale":0.8,"autoPlay":true,"delay":2000,"speed":300}'>
<div class="poster-btn poster-prev-btn"></div>
<ul class="poster-list">
<li class="poster-item"><a href="#"><img src="1.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="5.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="5.jpg" width="100%" height="100%"></a></li>
</ul>
<div class="poster-btn poster-next-btn"></div>
</div>
<p style="height:50px;"></p>
<div class="J_Poster poster-main" data-setting='{"width":800,"height":270,"posterWidth":640,"posterHeight":270,
"scale":0.8,"autoPlay":true,"delay":5000,"speed":300,"vericalAlign":"top"}'>
<div class="poster-btn poster-prev-btn"></div>
<ul class="poster-list">
<li class="poster-item"><a href="#"><img src="1.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="2.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="3.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="4.jpg" width="100%" height="100%"></a></li>
</ul>
<div class="poster-btn poster-next-btn"></div>
</div>
<script>
$(function () {
Carousel.init($(".J_Poster"));
});
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
