您正在使用 IPV4 [54.224.100.102] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
js实现上下滑动轮播
内容摘要: //找到right-btn元素添加事件varrighttBtnList;varLine;vartransy=0;varliHeight=430;varulItem;varcount=0;vartimer;varspeed=2000;varItem;varItemMenu;varoffsetTop=0;varitemtabinfo,topBtn,bottomB......
//找到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)

}

}

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:js实现列表循环滚动

 

下一篇:JS实现图片上下切换

发布日期:2022/10/8
手机扫二维码直达本页
发布时间:14:25:05
点  击:10
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....