怎么使用js实现上下滑动轮播
导读:本文共2445字符,通常情况下阅读需要8分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、效果图二、设计思路第一步:遍历所有的元素使得鼠标点击右侧小图时,图片变亮并且根据偏移值加上红框。点击右边的小图左边出现对用的图片。第二步:利用循环计时器,克隆ul里面的第一个元素使得连续循环滑动。第三步:鼠标进入时循环滑动停止,离开时继续。第四步:设置上下按钮,当第一张图片的offsetTop值为0时,下面按钮出现,当到达底部最后一个元素时,上面按钮出现,底... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。一、效果图
二、设计思路
第一步:遍历所有的元素使得鼠标点击右侧小图时,图片变亮并且根据偏移值加上红框。点击右边的小图左边出现对用的图片。
第二步:利用循环计时器,克隆ul里面的第一个元素使得连续循环滑动。
第三步:鼠标进入时循环滑动停止,离开时继续。
第四步:设置上下按钮,当第一张图片的offsetTop值为0时,下面按钮出现,当到达底部最后一个元素时,上面按钮出现,底部按钮消失,当在整个元素中间时,上下按钮都出现,每点击一次按钮移动一个格子,左边图片也对应改变。
三、核心代码
//找到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-whiteif(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;//获取原来的topvaroldTop=parseFloat(Line.style.top);Line.style.top=(oldTop+110)+"px";itemtabinfo.style.transform="translateY("+offsetTop+"px)";checkBtnShow();}bottomBtn.onclick=function(){offsetTop-=110;//获取原来的topvaroldTop=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-whitefunctioncheckClass(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)}}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:
怎么使用js实现上下滑动轮播的详细内容,希望对您有所帮助,信息来源于网络。