js实现上下滑动轮播_javascript技巧_

//找到right-btn 元素添加事件 var righttBtnList; var Line; var transy = 0; var liHeight = 430; var ulItem; var count = 0; var timer; var speed = 2000; var Item; var ItemMenu; var offsetTop = 0; var itemtabinfo, 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 (var i = 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             var oldTop = parseFloat(Line.style.top);             Line.style.top = (oldTop + 110) + "px";             itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";             checkBtnShow();         }         bottomBtn.onclick = function () {             offsetTop -= 110;             //获取原来的top             var oldTop = parseFloat(Line.style.top);             //只能取到行内样式             Line.style.top = (oldTop - 110) + "px";             itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";             checkBtnShow();         }         ItemMenu.onmouseenter = function () {             checkBtnShow();         }         function checkBtnShow() {             if (offsetTop == 0) {                 //下面按钮出现                 bottomBtn.classList.add("showBottom");                 topBtn.classList.remove("showTop");             }             else if (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         function checkClass(obj,className){             return obj.classList.contains(className);         }         //其余的li添加         function addWhite(index){             for(var i=0;i=ulItem.children.length-1){                         count=0;                         //移除过渡类                         ulItem.classList.remove("transY");                         ulItem.style.transform="translateY(0px)";                     }                     //让右边的元素动画对应                     //rigthBtnlist[count].click();                 },500)             },speed)         }     }