自定義外掛實現網易雲音樂首頁圖片輪播
阿新 • • 發佈：2019-01-01
- 編寫html介面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網易雲音樂首頁圖片輪播</title>
</head>
<body>
<div class="J_poster main" >
<div class="btn prv-btn"></div>
<ul 2 編寫介面CSS程式碼，並引入
//引入css
<link rel="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);