自定义插件实现网易云音乐首页图片轮播
- 编写html界面
<html>
<head>
<meta charset="utf-8" />
<title>网易云音乐首页图片轮播title>
head>
<body>
<div class="J_poster main" >
<div class="btn prv-btn">div>
<ul class="list">
<li class="item"><a href="#"><img src="img/a.jpg" width="100%" height="100%" />a>li>
<li class="item"><a href="#"><img src="img/b.jpg" width="100%" height="100%" />a>li>
<li class="item"><a href="#"><img src="img/c.jpg" width="100%" height="100%" />a>li>
<li class="item"><a href="#"><img src="img/d.jpg" width="100%" height="100%" />a>li>
<li class="item"><a href="#"><img src="img/f.jpg" width="100%" height="100%" />a>li>
ul>
<div class="btn next-btn">div>
div>
body>
html>
2 编写界面CSS代码，并引入
//引入css
"stylesheet" href="css/style.css" />
*{
margin: 0;
padding: 0;
}
body{
padding: 50px;
}
.main{
position: relative;
width: 800px;
height: 270px;
}
.btn{
width: 100px;
height: 270px;
position: absolute;
top: 0;
cursor: pointer;
opacity: 0.8;
z-index: 10;
}
.prv-btn{
left: 0;
background: url(../img/btn_l.png) no-repeat center center;
}
.next-btn{
background: url(../img/btn_r.png) no-repeat center center;
right: 0;
}
.main .list{
list-style: none;
width: 800px;
height: 270px;
}
.main .list .item{
position: absolute;
left: 0;
top: 0;
}
.main .item a ,.main .item img{
display: block;
}
3.分析插件需要的属性
this.setting = {
"width":1000, //图片轮播的宽度
"height":270, //图片轮播的高度
"posterWidth":640, //图片轮播第一帧的宽度
"posterHeight":270, //图片轮播第一帧的高度
"scale":0.9, //记录显示比例关系
"speed":500, //播放的速度
"autoPlay":false, //是否自动播放
"delay":500, //自动播放的间隔
};4.引入jQuery，搭建插件框架
//引入js
<script type="text/javascript" src="js/jquery-1.11.0.min.js" >script>
<script type="text/javascript" src="js/main.js" >script>
//搭建插件结构
;(function($){
var Carousel=function(poster){
};
Carousel.prototype={
};
Carousel.init=function(){
};
window["Carousel"]=Carousel;
})(jQuery);
//界面引用
<script >
$(function(){
Carousel.init($(".J_poster"));
});
script>5.图片轮播的div设置默认配置
<div class="J_poster main"
data-setting='{
"width":800,
"height":270,
"posterWidth":640,
"posterHeight":270,
"scale":0.9,
"speed":500,
"autoPlay":false,
"delay":500,
}'>
div>6.编写插件函数
Carousel.prototype=
//自动播放
autoPlay:function(){
},
//轮播函数
carouseRotate:function(dir){
},
//设置其它帧的位置
setPosterpos:function(){
},
//设置轮播参数以及第一帧
setSettingValue:function(){
},
//获取人工指定的setting值
getSetting:function(){
}
};7.插件的实现
;(function($){
var Carousel=function(poster){
var self=this;
//保存单个对象
this.poster=poster;
this.posterItemMain=poster.find('ul.list');
this.nextbtn=poster.find('div.next-btn');
this.prevbtn=poster.find('div.prv-btn');
this.posterItems=poster.find('li.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":500,
};
$.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"),
top=prev.css("top"),
left=prev.css("left");
zIndexArr.push(zIndex);
self.animate({
width:width,
height:height,
opacity:opacity,
left:left,
top:top
},_this_.setting.speed,function(){
_this_.rotateFlag=true;
});
});
//
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,
opacity:opacity,
left:left,
top:top,
},_this_.setting.speed,function(){
_this_.rotateFlag=true;
});
});
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;
rhsliceItem=sliceItems.slice(0,slicesize);
level =Math.floor(this.posterItems.size()/2);
lfsliceItem=sliceItems.slice(slicesize);
//设置右边
var rw=this.setting.posterWidth*self.setting.scale;
var rh=this.setting.posterHeight*self.setting.scale;
var gap=((this.setting.width-this.setting.posterWidth)/2)/level;
rhsliceItem.each(function(i){
level--;
var j=i;
$(this).css({
zIndex:level,
width:rw,
height:rh,
opacity:1/(++j),
left:rhlicew-rw,
top:self.setVertical(rh)
});
});
//设置左边
var lw=this.setting.posterWidth*self.setting.scale;
var lh=this.setting.posterHeight*self.setting.scale;
var loop=Math.floor(this.posterItems.size()/2);
lfsliceItem.each(function(i){
$(this).css({
zIndex:i,
width:lw,
height:lh,
opacity:1/loop,
left:0,
top:self.setting.height-lh
});
loop--;
});
},
//设置参数
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;
var zIndexval=Math.ceil(this.posterItems.size()/2);
this.nextbtn.css({
width:w,
height:this.setting.height,
zIndex:zIndexval
});
this.prevbtn.css({
width:w,
height:this.setting.height,
zIndex:zIndexval
});
this.posterFirstItem.css({
width:this.setting.posterWidth,
height:this.setting.posterHeight,
left:w,
top:0,
zIndex:zIndexval
});
},
//获取人工指定的setting值
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);