极客观点
项目管理
HarmonyOS
jQuery有一个animate的函数，我想用原生JavaScript实现，并且运用在幻灯片轮播上，开始点击左边的按钮是正常的，第二次点击开始出现元素的长宽位置一直在跳动，找不出原因,继续轮播图片发生错位。我觉得应该是我写的animate函数有问题，但是不知道哪有问题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转木马 幻灯片开发</title>
<link type="text/css" rel="stylesheet" href="css/carousel.css">
</head>
<body style="padding:50px;">
<div class="J_Poster poster-main" data-setting='{}'>
<div class="poster-btn poster-prev-btn"></div>
<ul class="poster-list">
<li class="poster-item" id="i1"><a href="#"><img src="images/1.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/2.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/3.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/4.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/5.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/2.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/3.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/4.jpg" width="100%" height="100%"></a></li>
<li class="poster-item"><a href="#"><img src="images/5.jpg" width="100%" height="100%"></a></li>
</ul>
<div class="poster-btn poster-next-btn"></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
<script>
window.onload=function(){
var objs=document.getElementsByClassName("J_Poster");
Carousel.init(objs);
}
</script>
</body>
</html>
js代码
;(function(){
var Carousel=function(poster){
var _this_=this;
this.poster=poster;
this.posterItemMain=poster.getElementsByClassName("poster-item");
this.firstPoster=this.posterItemMain[0];
this.lastPoster=this.posterItemMain[this.posterItemMain.length-1];
this.prePoster=this.firstPoster;
this.nextBtn=poster.getElementsByClassName("poster-next-btn")[0];
this.preBtn=poster.getElementsByClassName("poster-prev-btn")[0];
this.rotateFlag=true;//防止点击事件叠加
this.setting={
"width":1000,
"height":270,
"posterWidth":640,
"posterHeight":270,
"scale":0.9,
"speed":500,
"deLay":5000,
"auto":false,
"verticalAlign":"middle"
};
this.setSettingValue();
this.setPosterPos();
//自动播放
if(this.setting.auto){
this.autoPlay();
this.poster.onmouseover=function(){
clearInterval(_this_.timer);
}
this.poster.onmouseout=function(){
_this_.autoPlay();
}
}
this.nextBtn.onclick=function(){
if(_this_.rotateFlag){
_this_.rotateFlag=false;
_this_.rotate("right");
};
}
this.preBtn.onclick=function(){
if(_this_.rotateFlag){
_this_.rotateFlag=false;
_this_.rotate("left");
}
}
};
Carousel.prototype={
setVertical:function(height){
var top;
if(this.setting.verticalAlign=="top"){
top=0;
}else if(this.setting.verticalAlign=="middle"){
top=parseInt((this.setting.height-height)/2);
}else if(this.setting.verticalAlign=="bottom"){
top=this.setting.height-height;
}else{
top=parseInt((this.setting.height-height)/2);
}
return top;
},
autoPlay:function(){
var self=this;
this.timer=setInterval(function(){
$(self.nextBtn).click();
},self.setting.deLay);
},
//旋转
rotate:function(str){
var _this_=this;
if(str=="right"){
for(var i=0;i<this.posterItemMain.length;i++){
var next=this.posterItemMain[i].nextElementSibling?this.posterItemMain[i].nextElementSibling:this.firstPoster;
var width=next.style.width;
var height=next.style.height;
var left=next.style.left;
var top=next.style.top;
var zIndex=next.style.zIndex;
var opacity=next.style.opacity;
//animate异步函数
// $(this.posterItemMain[i]).animate({
// width:width,
// height:height,
// zIndex:zIndex,
// opacity:opacity,
// left:left,
// top:top
// },_this_.setting.speed,function(){
// _this_.rotateFlag = true;
// });
this.animate(this.posterItemMain[i],{
width:width,
height:height,
zIndex:zIndex,
opacity:opacity,
left:left,
top:top
},_this_.setting.speed,function(){
_this_.rotateFlag = true;
console.log(777)
})
}
}else if(str=="left"){
for(var i=0;i<this.posterItemMain.length;i++){
var pre=this.posterItemMain[i].previousElementSibling?this.posterItemMain[i].previousElementSibling:this.lastPoster;
var width=pre.style.width;
var height=pre.style.height;
var left=pre.style.left;
var top=pre.style.top;
var zIndex=pre.style.zIndex;
var opacity=pre.style.opacity;
//animate异步函数，设置了定时器
// $(this.posterItemMain[i]).animate({
// width:width,
// height:height,
// zIndex:zIndex,
// opacity:opacity,
// left:left,
// top:top
// },_this_.setting.speed,function(){
// _this_.rotateFlag = true;
// });
this.animate(this.posterItemMain[i],{
width:width,
height:height,
zIndex:zIndex,
opacity:opacity,
left:left,
top:top
},_this_.setting.speed,function(){
_this_.rotateFlag = true;
console.log(777)
})
}
}
},
animate:function(obj,data,time,callback){
//here
data.width=data.width.split("px")[0];
data.height=data.height.split("px")[0];
data.top=data.top.split("px")[0];
data.left=data.left.split("px")[0];
var width=data.width-obj.clientWidth;
var height=data.height-obj.clientHeight;
var top=data.top-obj.offsetTop;
var left=data.left-obj.offsetLeft;
var opacity=data.opacity-obj.style.opacity;
var space=15;
var flag1,flag2,flag3,flag4,flag5;
var timer=setInterval(function(){
obj.style.width=parseInt(obj.clientWidth+width/space)+"px";
obj.style.height=parseInt(obj.clientHeight+height/space)+"px";
obj.style.top=parseInt(obj.offsetTop+top/space)+"px";
obj.style.left=parseInt(obj.offsetLeft+left/space)+"px";
obj.style.opacity=parseFloat(obj.style.opacity)+opacity/10;
if(width<=0&&obj.clientWidth<=data.width){
obj.style.width=data.width+"px";
flag1=true;
}else if(width>0&&obj.clientWidth>=data.width){
obj.style.width=data.width+"px";
flag1=true;
}
if(height<=0&&obj.clientHeight<=data.height){
obj.style.height=data.height+"px";
flag2=true;
}else if(height>0&&obj.clientHeight>=data.height){
obj.style.height=data.height+"px";
flag2=true;
}
if(top<=0&&obj.offsetTop<=data.top){
obj.style.top=data.top+"px";
flag3=true;
}else if(top>0&&obj.offsetTop>=data.top){
obj.style.top=data.top+"px";
flag3=true;
}
if(left<=0&&obj.offsetLeft<=data.left){
obj.style.left=data.left+"px";
flag4=true;
}else if(left>0&&obj.offsetLeft>=data.left){
obj.style.left=data.left+"px";
flag4=true;
}
if(opacity<=0&&parseFloat(obj.style.opacity)<=data.opacity){
obj.style.opacity=data.opacity;
flag5=true;
}else if(opacity>0&&parseFloat(obj.style.opacity)>=data.opacity){
obj.style.opacity=data.opacity;
flag5=true;
}
if(obj.style.zIndex!=data.zIndex){
obj.style.zIndex=data.zIndex
}
if(flag1&&flag2&&flag3&&flag4&&flag5){
clearInterval(timer);
callback();
}
},50);
},
//设置参数
setSettingValue:function(){
this.poster.style.width=this.setting.width+"px";
this.poster.style.height=this.setting.height+"px";
this.firstPoster.style.width=this.setting.posterWidth+"px";
this.firstPoster.style.height=this.setting.posterHeight+"px";
var bw=parseInt((this.setting.width-this.setting.posterWidth)/2);
this.preBtn.style.width=bw+"px";
this.preBtn.style.height=this.setting.height+"px";
this.nextBtn.style.width=bw+"px";
this.nextBtn.style.height=this.setting.height+"px";
this.firstPoster.style.left=bw+"px";
this.firstPoster.style.top=this.setVertical(this.firstPoster.offsetHeight);
this.firstPoster.style.opacity=1;
console.log("right:"+this.firstPoster.style.right);
},
setPosterPos:function(){
var objs=Array.prototype.slice.call(this.posterItemMain);
var size=(this.posterItemMain.length-1)/2;
console.log(size);
this.firstPoster.style.zIndex=size+1;
var rightPoster=objs.slice(1,size+1);
var leftPoster=objs.slice(size+1);
var posterSpace=parseInt((this.setting.width-this.setting.posterWidth)/(2*size));
var rw=this.setting.posterWidth;
var rh=this.setting.posterHeight;
var rl=parseInt((this.setting.width-this.setting.posterWidth)/2);
var rr=parseInt((this.setting.width-this.setting.posterWidth)/2);
var rt=this.setVertical(rh);;
var level=1;
var zindex=size+1;
for(var i=0;i<size;i++){
rw=parseInt(rw*this.setting.scale);
rh=parseInt(rh*this.setting.scale);
rr=rr-posterSpace;
rl=this.setting.width-(rr+rw);
rt=parseInt((this.setting.height-rh)/2);
zindex--;
level++;
rightPoster[i].style.width=rw+"px";
rightPoster[i].style.height=rh+"px";
rightPoster[i].style.left=rl+"px";
rightPoster[i].style.top=rt+"px";
rightPoster[i].style.zIndex=zindex;
rightPoster[i].style.opacity=1/level;
}
for(var i=0;i<size;i++){
rl=posterSpace*i;
leftPoster[i].style.width=rw+"px";
leftPoster[i].style.height=rh+"px";
leftPoster[i].style.left=rl+"px";
leftPoster[i].style.top=rt+"px";
leftPoster[i].style.zIndex=zindex;
leftPoster[i].style.opacity=1/level;
rw=parseInt(rw/this.setting.scale);
rh=parseInt(rh/this.setting.scale);
rt=parseInt((this.setting.height-rh)/2);
zindex++;
level--;
}
},
};
Carousel.init=function(posters){
var _this=this;
for(var i=0;i<posters.length;i++){
new _this(posters[i]);
}
}
window["Carousel"]=Carousel;
})();
代码太长。。。。。