//找到right-btn元素添加事件
varrighttBtnList;
varLine;
vartransy=0;
varliHeight=430;
varulItem;
varcount=0;
vartimer;
varspeed=2000;
varItem;
varItemMenu;
varoffsetTop=0;
varitemtabinfo,topBtn,bottomBtn;
window.onload=function(){
righttBtnList=document.getElementsByClassName("right-btn");
Line=document.getElementsByClassName("line")[0];
ulItem=document.getElementsByClassName("item-child-ul")[0];
Item=document.getElementsByClassName("item-list")[0];
ItemMenu=document.getElementsByClassName("item-menu")[0];
itemtabinfo=document.getElementsByClassName("item-tab-info")[0];
topBtn=document.getElementsByClassName("top-btn")[0];
bottomBtn=document.getElementsByClassName("bottom-btn")[0];
//默认复制第一张添加到ulItem之中
ulItem.appendChild(ulItem.children[0].cloneNode(true));
//设置itemtabinfo默认移动值
itemtabinfo.style.transform="translateY("+offsetTop+"px)";
//直接默认启动计时器
Animate();
//遍历所有的li添加事件
for(vari=0;i<righttBtnList.length;i++){
righttBtnList[i].index=i;
righttBtnList[i].onclick=function(){
//点击当前移除top-white
if(checkClass(this,'top-white')){
this.classList.remove("top-white");
//其余的添加
addWhite(this.index);
}
//获取偏移值
Line.style.top=((this.index*110+10)+offsetTop)+"px";
//输出当前点击的索引
ulItem.style.transform="translateY("+(-this.index*liHeight)+"px)";
//用户点击的索引对应count值
count=this.index;
}
}
Item.onmouseenter=function(){
clearTimeout(timer);
}
Item.onmouseleave=function(){
Animate();
}
topBtn.onclick=function(){
offsetTop+=110;
//获取原来的top
varoldTop=parseFloat(Line.style.top);
Line.style.top=(oldTop+110)+"px";
itemtabinfo.style.transform="translateY("+offsetTop+"px)";
checkBtnShow();
}
bottomBtn.onclick=function(){
offsetTop-=110;
//获取原来的top
varoldTop=parseFloat(Line.style.top);
//只能取到行内样式
Line.style.top=(oldTop-110)+"px";
itemtabinfo.style.transform="translateY("+offsetTop+"px)";
checkBtnShow();
}
ItemMenu.onmouseenter=function(){
checkBtnShow();
}
functioncheckBtnShow(){
if(offsetTop==0){
//下面按钮出现
bottomBtn.classList.add("showBottom");
topBtn.classList.remove("showTop");
}
elseif(offsetTop==-220){
//上面按钮出现
topBtn.classList.add("showTop");
bottomBtn.classList.remove("showBottom");
}else{
//两个按钮同时出现
bottomBtn.classList.add("showBottom");
topBtn.classList.add("showTop");
}
}
ItemMenu.onmouseleave=function(){
bottomBtn.classList.remove("showBottom");
topBtn.classList.remove("showTop");
}
//检测是否具有top-white
functioncheckClass(obj,className){
returnobj.classList.contains(className);
}
//其余的li添加
functionaddWhite(index){
for(vari=0;i<righttBtnList.length;i++){
if(i!=index){
righttBtnList[i].classList.add("top-white");
}
}
}
//启动计时器动画
functionAnimate(){
//写执行代码
timer=setInterval(function(){
if(timer)
clearInterval(timer);
if(!ulItem.classList.contains("transY")){
ulItem.classList.add("transY");
}
count++;
ulItem.style.transform="translateY("+(-count*liHeight)+"px)";
//找出当前每一张图动画完成时间
setTimeout(function(){
if(count>=ulItem.children.length-1){
count=0;
//移除过渡类
ulItem.classList.remove("transY");
ulItem.style.transform="translateY(0px)";
}
//让右边的元素动画对应
//rigthBtnlist[count].click();
},500)
},speed)
}
}
|