本文作者html5tricks，转载请注明出处
之前我们为大家分享过一款jQuery内容层叠滚动切换动画插件，主要是针对文字的层叠式切换。今天要介绍的也是一款层叠式切换插件，不过它是一款jQuery焦点图应用，除了当前的图片，我们可以看到所有图片的一部分，切换后显示下一张图片，切换动画是层叠式的效果。
下面我们一起来看看实现这款jQuery层叠式图片切换焦点图的具体细节。
HTML代码
HTML代码非常简单，主要是使用了ul列表将所有图片列出来，当然需要在ul外面包一层div，并将div的class设置成carousel，因为后面jQuery调用时需要找到这个节点，具体代码如下：
<div class="carousel content-main"> <ul class="list"> <li><img src="img/photo_1.jpg"></li> <li><img src="img/photo_2.jpg"></li> <li><img src="img/photo_3.jpg"></li> <li><img src="img/photo_4.jpg"></li> <li><img src="img/photo_5.jpg"></li> <li><img src="img/photo_3.jpg"></li> <li><img src="img/photo_4.jpg"></li> <li><img src="img/photo_5.jpg"></li> <li><img src="img/photo_3.jpg"></li> <li><img src="img/photo_4.jpg"></li> <li><img src="img/photo_5.jpg"></li> </ul> </div>
CSS代码
CSS代码也非常简单，主要是渲染播放器的图片切换按钮以及网页背景：
ul{
list-style: none;
}
a,img{
display: block;
}
.content-main{
position: relative;
width: 800px;
height: 411px;
background: #bbb9b9;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.content-btn{
position: absolute;
width:100px;
height:411px;
background: rgba(150,150,150,0.5);
z-index:10;
cursor: pointer;
}
.prev-btn{
left:0;
top:0;
}
.next-btn{
right:0;
top:0;
}
.btn-img{
opacity:0.8;
display: block;
position: absolute;
left:0;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.list{
width:800px;
height:411px;
}
.list li{
position: absolute;
left:0;
top:0;
overflow: hidden;
}
JavaScript代码
JavaScript代码需要分解一下，这里我们主要用到的框架是jQuery，因此首先需要在页面中引用jQuery脚本库：
<script type="text/javascript" src="js/jquery.min.js"></script>
接下来是这个层叠式图片切换焦点图插件完整代码：
(function($){
//创建类
var Carousel = function(con){
var self = this;
this.con = con;
this.setDirect();
this.conItem = con.find("ul.list");
this.prev = con.find(".prev-btn");
this.next = con.find(".next-btn");
this.conItems = con.find("li");
this.conItemFirst = this.conItems.first();
this.conItemLast = this.conItems.last();
this.flag = true;
//默认配置参数
this.settings = {
width:900, //幻灯片的宽度
height:4110, //幻灯片的高度
postWidth:658, //第一帧的宽度
postHeight:411, //第一帧的高度
scale:0.8,
speed:500,
verticalAlign:'center',
autoPlay:false,
delay:1000
}
$.extend(this.settings,this.getSetting());
this.setSettingValue();
this.setPostOther();
this.next.on("click",function(){
if(self.flag){
self.flag = false;
self.rotate("left");
}
});
this.prev.on("click",function(){
if(self.flag){
self.flag = false;
self.rotate("right");
}
});
if(this.settings.autoPlay){
this.autoPlay();
this.con.hover(function(){
window.clearInterval(self.timer);
},function(){
self.autoPlay();
});
}
}
//原型方法
Carousel.prototype = {
//设置上一张和下一张大小
setDirect:function(){
var prev = $("<div></div>").addClass("content-btn prev-btn").append($("<img/>").attr("src","img/left.png").addClass("btn-img"));
this.con.prepend(prev);
var next = $("<div></div>").addClass("content-btn next-btn").append($("<img/>").attr("src","img/right.png").addClass("btn-img"));
this.con.append(next);
},
//自动播放函数
autoPlay:function(){
var self = this;
this.timer = window.setInterval(function(){
self.next.click();
},this.settings.delay);
},
//旋转函数
rotate:function(dir){
var _this = this;
var zIndex = []
if(dir === "left"){
this.conItems.each(function(){
var prev = $(this).prev().get(0)?$(this).prev():_this.conItemLast;
zIndex.push(prev.css("zIndex"));
$(this).animate({
width:prev.width(),
height:prev.height(),
top:prev.css("top"),
left:prev.css("left"),
opacity:prev.css("opacity")
},_this.settings.speed,function(){
_this.flag = true;
});
});
this.conItems.each(function(i){
$(this).css({zIndex:zIndex[i]})
});
}else if(dir === "right"){
this.conItems.each(function(){
var next = $(this).next().get(0)?$(this).next():_this.conItemFirst;
zIndex.push(next.css("zIndex"));
$(this).animate({
width:next.width(),
height:next.height(),
top:next.css("top"),
left:next.css("left"),
opacity:next.css("opacity")
},_this.settings.speed,function(){
_this.flag = true;
});
});
this.conItems.each(function(i){
$(this).css({zIndex:zIndex[i]})
});
}
},
//设置剩余帧位置关系
setPostOther:function(){
var self =this,
sliceItem = this.conItems.slice(1),
sliceLength = sliceItem.length,
rightItem = sliceItem.slice(0,sliceLength/2),
leftItem = sliceItem.slice(sliceLength/2),
level = Math.floor(sliceLength/2),
llevel = level,
rw = this.settings.postWidth,
rh = this.settings.postHeight,
gap = (this.settings.width - this.settings.postWidth)/2/level;
rightItem.each(function(i){
rw = rw*self.settings.scale;
rh = rh*self.settings.scale;
var j = i;
$(this).css({
zIndex:--level,
width:rw,
height:rh,
left:(self.settings.width + self.settings.postWidth)/2 + gap*(++i) - rw,
top:self.setVerticalAlign(rh),
opacity:1/(++j)
});
});
var lw = rightItem.last().width(),
lh = rightItem.last().height();
leftItem.each(function(i){
$(this).css({
zIndex:level++,
width:lw,
height:lh,
left:gap*i,
top:self.setVerticalAlign(lh),
opacity:1/llevel--
});
lw = lw/self.settings.scale;
lh = lh/self.settings.scale;
});
},
//设置对齐方式
setVerticalAlign:function(h){
if(this.settings.verticalAlign === "middle"){
return (this.settings.height - h)/2;
}else if(this.settings.verticalAlign === "top"){
return 0;
}else if(this.settings.verticalAlign === "bottom"){
return this.settings.height - h;
}else {
return (this.settings.height - h)/2;
}
},
//设置配置参数控制幻灯片显示
setSettingValue:function(){
this.con.css({
width:this.settings.width,
height:this.settings.height
});
this.conItem.css({
width:this.settings.width,
height:this.settings.height
});
var w = (this.settings.width - this.settings.postWidth)/2;
this.prev.css({
width:w,
height:this.settings.height,
zIndex:Math.ceil((this.conItems.length)/2)
});
this.prev.find("img").css({
width:w,
height:w,
});
this.next.css({
width:w,
height:this.settings.height,
zIndex:Math.ceil((this.conItems.length)/2)
});
this.next.find("img").css({
width:w,
height:w
});
this.conItemFirst.css({
top:0,
left:w,
width:this.settings.postWidth,
height:this.settings.postHeight,
zIndex:this.conItems.length
});
},
//接收配置参数
getSetting:function(){
var con = this.con.attr("data-setting");
if(con && con!==""){
return $.parseJSON(con);
}else {
return "";
}
}
}
//初始化
Carousel.init = function(carousel){
var _this = this;
carousel.each(function(){
new _this($(this));
});
}
window.Carousel = Carousel;
})(jQuery)
这里如果要研究，那么可以将每一个函数拆分开来看，逻辑都不是很难。
最后就是需要调用上面的插件，也很简单：
<script type="text/javascript">
var setting = {
width:1000,
height:270,
postWidth:658,
postHeight:270,
scale:0.8,
speed:500,
verticalAlign:"center"
}
$(".carousel").attr("data-setting",'{ "width":900,"height":411,"postWidth":658}')
Carousel.init($(".carousel"))
</script>
主要是设置一些参数，我们可以设置焦点图的尺寸、图片切换速度、图片对齐方式等。
这是jQuery插件实现的最经典方法，你也可以参考这个例子自己实现一个简单的jQuery插件。当然你可以下载完整的代码仔细研究。
