效果图就这样
Image.png
代码注释写的很详细，仔细阅读代码就可以学会了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.js" type="text/javascript"></script>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>-->
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.poster-main{
top: 100px;
left: 100px;
width: 800px;
height: 600px;
position: relative;
}
.poster-main .poster-list{
width: 800px;
height: 600px;
}
.poster-main .poster-list .poster-item{
position: absolute;
list-style-type: none;
top: 0;
left: 0;
}
.poster-main .poster-list .poster-item img{
display: block;
width: 100%;
height: 100%;
position: relative;
}
.poster-main .poster-list .poster-item a{
display: block;
width: 100%;
height: 100%;
}
.poster-main .poster-btn{
width: 100px;
height: 600px;
position: absolute;
top: 0;
background-color: red;
z-index: 10;
text-align: center;
line-height: 600px;
font-size: 80px;
font-weight: 900;
color: #555555;
cursor: pointer;
opacity: 0.2;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.poster-main .poster-pre-btn{
left: 0;
}
.poster-main .poster-next-btn{
right: 0;
}
</style>
</head>
<body>
<div class="J_poster poster-main" data-setting='{
"width":1000,
"height":600,
"postWidth":600,
"postHeight":600,
"scale":"0.8",
"speed":500,
"autoPlay":true,
"delay":500,
"verticalAlign":"top"
}'><!--//json转换成字符串，一定要是正确json对象，属性上一定加上引号-->
<div class="poster-btn poster-pre-btn" ><</div>
<ul class="poster-list">
<li class="poster-item"><a href=""></a></li>
<li class="poster-item"><a href=""></a></li>
<li class="poster-item"><a href=""></a></li>
<li class="poster-item"><a href=""></a></li>
<li class="poster-item"><a href=""></a></li>
<li class="poster-item"><a href=""></a></li>
<li class="poster-item"><a href=""></a></li>
<li class="poster-item"><a href=""></a></li>
</ul>
<div class="poster-btn poster-next-btn">></div>
</div>
</body>
<script type="text/javascript">
$(function(){
//var carouse=new Carousel($(".J_poster").eq(0)) ;
//如果有多个地方引用插件
Carousel.init($(".J_poster"));
});
(function($){
var Carousel=function(poster){ //实例化之后，方法中的this全部指向，实例化后的对象，进而引用位于原型上的方法
var self=this;
//保存单个旋转木马对象，防止对象被改变
this.poster=poster;//保存在this上
//找到轮播区的对象
this.posterItemMain=this.poster.find("ul.poster-list");
//保存切换按钮
this.nextBtn=this.poster.find("div.poster-next-btn");
this.prevBtn=this.poster.find("div.poster-pre-btn");
//第一帧的图片
this.posterItems=poster.find("li.poster-item");
//当总图片个数为偶数张的时候，就复制一张，插入到容器中，为了保证下面postFirstItem postLastItem获取最新的数据，需紧接着posterItems来插入
if(this.posterItems.size()%2==0){
this.posterItemMain.append(this.posterItems.eq(0).clone());//把第一帧克隆一份，插入到容器中
this.posterItems=this.posterItemMain.children();//通过父容器的子元素来更新最小帧数
}
this.postFirstItem=this.poster.find("li.poster-item").eq(0);
this.postLastItem=this.poster.find("li.poster-item").last();
/*定义旋转的标识，当为true时改变*/
this.rotateFlag=true;
this.timer=null;
//默认配置参数
this.setting={
width:800,//幻灯片宽度
height:600,//幻灯片高度
postWidth:450,//最前面照片宽度
postHeight:600,//最前面照片高度
scale:'0.9',//图片缩放比例
speed:500,//切换速度
"autoPlay":true,
"delay":500,
verticalAlign:"middle"//广告位置
};
$.extend(this.setting,this.getSetting());//取得html中data-setting并扩展到this.setting上
this.setSettingValue();
this.setPosterPosition();
this.nextBtn.click(function(){
if(self.rotateFlag){
self.rotateFlag=false;
self.carouseRotate("right");
}
});
this.prevBtn.click(function(){
if(self.rotateFlag){
self.rotateFlag=false;
self.carouseRotate("left");
}
});
//是否开启自动播放
this.autoPlay();
};
Carousel.init=function(posters){
var _self=this;//这个this指向的调用上下文，指的是Carousel
posters.each(function(){
new _self( $(this));//这个this指向的是当前的一个poster，遍历后的poster，当前上下文
});
};//创建类中初始化的方法，在此类中用来处理在页面中所有传进来的集合
Carousel.prototype={//插件
//设置配置参数值，来控制基本高度 宽度
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.postWidth)/2;
var h=this.setting.postHeight;
this.prevBtn.css({
width:w,
height:h,
zIndex:Math.ceil(this.posterItems.size()/2) //通过设置按钮的index来保证永远在前面，永远大于一半的图片个数 向上取整 zIndex不能有- 并且大写
});
this.nextBtn.css({
width:w,
height:h,
zIndex:Math.ceil(this.posterItems.size()/2)
});
//设置第一帧位置
this.postFirstItem.css({
left:w,
width:this.setting.postWidth,
height:this.setting.postHeight,
zIndex:Math.floor(this.posterItems.size()/2) //向下取整 照片不予按钮冲突
});
},
//设置剩余广告位置
setPosterPosition:function(){
var self=this;
var sliceItem=this.posterItems.slice(1);//除去第一帧的
var sliceSize=sliceItem.size()/2;
var rightSlice=sliceItem.slice(0,sliceSize);//右侧的帧数
var level=Math.floor(this.posterItems.size()/2);//层级关系 z-index
var leftSlice=sliceItem.slice(sliceSize);//左侧帧数
var rw=this.setting.postWidth;
var rh=this.setting.postHeight;
var gap=((this.setting.width-this.setting.postWidth)/2)/level;
var firsLeft=((this.setting.width-this.setting.postWidth)/2);
var offsetLeft=firsLeft+rw;//第一帧图片最右侧的left值
//设置右侧的css样式
rightSlice.each(function(i){
level--;
rw=rw*self.setting.scale; //每一次都乘以系数
rh=rh*self.setting.scale; //每一次都乘以系数
$(this).css({
zIndex:level, //来设置当前对象的层级关系
width:rw,
height:rh,
opacity:1/(++i),
left:offsetLeft+(i++)*gap-rw,
top:self.setVertualAlign(rh)
})
});
//设置左侧CSS样式
var lw =rightSlice.last().width(); //通过对称取得宽度
var lh=rightSlice.last().height(); //通过对称取得高度
var oloop=Math.floor(this.posterItems.size()/2);//左侧的层级关系 z-index
leftSlice.each(function(i){
$(this).css({
zIndex:i, //来设置当前对象的层级关系
width:lw,
height:lh,
opacity:1/(oloop),
left:gap*(i++),
top:self.setVertualAlign(lh)
});
//把参数变化放在后面，先让参数执行一次
lw=lw/self.setting.scale;
lh=lh/self.setting.scale;
oloop--;
});
},
//设置垂直对其
setVertualAlign:function(height){
var self=this;
var vertualType=self.setting.verticalAlign;
var top=0;
/*if(vertualType==="middle"){
top=(self.setting.height-height)/2
}else if(vertualType==="top"){
top=0;
}else if(vertualType==="bottom"){
top=self.setting.height-height;
} else{
top=(self.setting.height-height)/2
}*/
switch (vertualType){
case "middle":return top=(self.setting.height-height)/2; break;
case "top":return top=0; break;
case "bottom" :return top=self.setting.height-height;break;
}
},
/*旋转函数*/
carouseRotate:function(dir){
var _this_=this;//这个this保存对Carousel的引用
var zIndexArryLeft=[];//为zIndex保存一个数组，来存储在遍历对象过程中存储的数组
var zIndexArryRight=[];//为zIndex保存一个数组，来存储在遍历对象过程中存储的数组
if(dir==="left"){//当前点击的这一帧的参数变成前一帧的参数
this.posterItems.each(function(){//遍历每一个对象
var self=$(this);//当前的jquery对象，保存起来
var prev=self.prev().get(0)?self.prev():_this_.postLastItem; //获取向左旋转过程中下一个对象
var width=prev.width(); //获取下一个对象的参数
var height=prev.height();//获取下一个对象的参数
var zIndex=prev.css("zIndex");//获取下一个对象的参数
var opacity=prev.css("opacity");//获取下一个对象的参数
var left=prev.css("left");//获取下一个对象的参数
var top=prev.css("top");//获取下一个对象的参数
zIndexArryLeft.push(zIndex);
/*设置当前对象动画过渡过程*/
self.animate({
width:width,
height:height,
//zIndex:zIndex,
opacity:opacity,
left:left,
top:top
},_this_.setting.speed,function(){
//当动画运动结束的的时候，更改动画标识符
_this_.rotateFlag=true;
});
});
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArryLeft[i]);
});
}else if(dir==="right"){//当前点击的这一帧的参数变成后一帧的参数
this.posterItems.each(function(){//遍历每一个对象
var self=$(this);//当前的jquery对象，保存起来
var next=self.next().get(0)?self.next():_this_.postFirstItem; //获取向左旋转过程中下一个对象
var width=next.width(); //获取下一个对象的参数
var height=next.height();//获取下一个对象的参数
var zIndex=next.css("zIndex");//获取下一个对象的参数
var opacity=next.css("opacity");//获取下一个对象的参数
var left=next.css("left");//获取下一个对象的参数
var top=next.css("top");//获取下一个对象的参数
zIndexArryRight.push(zIndex);
/*设置当前对象动画过渡过程*/
self.animate({
width:width,
height:height,
//zIndex:zIndex,
opacity:opacity,
left:left,
top:top
},_this_.setting.speed,function(){
//当动画运动结束的的时候，更改动画标识符
_this_.rotateFlag=true;
});
})
}
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArryRight[i]);
});
},
/*自动执行函数*/
autoPlay:function(){
var self=this;//保存对Carousel引用
self.timer=setInterval(function(){
self.nextBtn.click();
},self.setting.delay);
/*this.posterItems.mouseover(function(){
clearInterval(self.timer);
});
this.posterItems.mouseout(function(){
clearInterval(self.timer);//防止效果叠加，需离开的时候在清除一次
self.autoPlay();
})*/
this.posterItems.hover(function(){ //当鼠标位于图片上
clearInterval(self.timer);
},function(){
clearInterval(self.timer);//防止效果叠加，需离开的时候在清除一次
self.autoPlay();
});
this.nextBtn.hover(function(){//当鼠标位于按钮上
clearInterval(self.timer);
},function(){
clearInterval(self.timer);//防止效果叠加，需离开的时候在清除一次
self.autoPlay();
});
this.prevBtn.hover(function(){//当鼠标位于按钮上
clearInterval(self.timer);
},function(){
clearInterval(self.timer);//防止效果叠加，需离开的时候在清除一次
self.autoPlay();
});
},
//获取人工配置参数
getSetting:function(){
var setting=this.poster.attr("data-setting");
if(setting&&setting!=""){
return $.parseJSON(setting);
}else{
return {};
}
},
};
window["Carousel"]=Carousel;//全局对象注册，把Carousel暴露给全局对象
})(jQuery);//传递进入jQuery用$接收
</script>
</html>
