js实现上下滑动轮播

本文实例为大家分享了js实现上下滑动轮播的具体代码，供大家参考，具体内容如下
一、效果图

二、设计思路

第一步：遍历所有的元素使得鼠标点击右侧小图时，图片变亮并且根据偏移值加上红框。点击右边的小图左边出现对用的图片。
第二步：利用循环计时器，克隆ul里面的第一个元素使得连续循环滑动。
第三步：鼠标进入时循环滑动停止，离开时继续。
第四步：设置上下按钮，当第一张图片的offsetTop值为0时，下面按钮出现，当到达底部最后一个元素时，上面按钮出现，底部按钮消失，当在整个元素中间时，上下按钮都出现，每点击一次按钮移动一个格子，左边图片也对应改变。
三、核心代码

1. //找到right-btn 元素添加事件
2. var righttBtnList;
3. var Line;
4. var transy = 0;
5. var liHeight = 430;
6. var ulItem;
7. var count = 0;
8. var timer;
9. var speed = 2000;
10. var Item;
11. var ItemMenu;
12. var offsetTop = 0;
13. var itemtabinfo, topBtn, bottomBtn;
14.   window.onload = function () {
15.     righttBtnList = document.getElementsByClassName("right-btn");
16.     Line = document.getElementsByClassName("line")[0];
17.     ulItem = document.getElementsByClassName("item-child-ul")[0];
18.     Item = document.getElementsByClassName("item-list")[0];
19.     ItemMenu = document.getElementsByClassName("item-menu")[0];
20.     itemtabinfo = document.getElementsByClassName("item-tab-info")[0];
21.     topBtn = document.getElementsByClassName("top-btn")[0];
22.     bottomBtn = document.getElementsByClassName("bottom-btn")[0];
23.     //默认复制第一张添加到ulItem之中
24.     ulItem.appendChild(ulItem.children[0].cloneNode(true));
25.     //设置itemtabinfo 默认移动值
26.     itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";
27.     //直接默认启动计时器
28.     Animate();
29.     //遍历所有的li添加事件
30.     for (var i = 0; i < righttBtnList.length; i++) {
31.       righttBtnList[i].index = i;
32.       righttBtnList[i].onclick = function () {
33.         //点击当前移除top-white
34.         if (checkClass(this, 'top-white')) {
35.           this.classList.remove("top-white");
36.           //其余的添加
37.           addWhite(this.index);
38.         }
39.         //获取偏移值
40.         Line.style.top = ((this.index * 110 + 10) + offsetTop) + "px";
41.         //输出当前点击的索引
42.         ulItem.style.transform = "translateY(" + (-this.index * liHeight) + "px)";
43.         //用户点击的索引 对应count值
44.         count = this.index;
45.       }
46.     }
48.     Item.onmouseenter=function(){
49.       clearTimeout(timer);
50.     }
51.     Item.onmouseleave=function(){
52.       Animate();
53.     }
54.     topBtn.onclick = function () {
55.       offsetTop += 110;
56.       //获取原来的top
57.       var oldTop = parseFloat(Line.style.top);
58.       Line.style.top = (oldTop + 110) + "px";
59.       itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";
60.       checkBtnShow();
61.     }
62.     bottomBtn.onclick = function () {
63.       offsetTop -= 110;
64.       //获取原来的top
65.       var oldTop = parseFloat(Line.style.top);
66.       //只能取到行内样式
67.       Line.style.top = (oldTop - 110) + "px";
68.       itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";
69.       checkBtnShow();
70.     }
72.     ItemMenu.onmouseenter = function () {
73.       checkBtnShow();
74.     }
75.     function checkBtnShow() {
76.       if (offsetTop == 0) {
77.         //下面按钮出现
78.         bottomBtn.classList.add("showBottom");
79.         topBtn.classList.remove("showTop");
81.       }
82.       else if (offsetTop == -220) {
83.         //上面按钮出现
84.         topBtn.classList.add("showTop");
85.         bottomBtn.classList.remove("showBottom");
86.       } else {
87.         //两个按钮同时出现
88.         bottomBtn.classList.add("showBottom");
89.         topBtn.classList.add("showTop");
90.       }
91.     }
93.     ItemMenu.onmouseleave = function () {
94.       bottomBtn.classList.remove("showBottom");
95.       topBtn.classList.remove("showTop");
96.     }
97.     //检测是否具有top-white
98.     function checkClass(obj,className){
99.       return obj.classList.contains(className);
100.     }
101.     //其余的li添加
102.     function addWhite(index){
103.       for(var i=0;i<righttBtnList.length;i++){
104.         if(i!=index){
105.           righttBtnList[i].classList.add("top-white");
106.         }
107.       }
108.     }
109.     //启动计时器动画
110.     function Animate(){
111.       //写执行代码
112.       timer=setInterval(function(){
113.         if (timer)
114.           clearInterval(timer);
115.         if(!ulItem.classList.contains("transY")){
116.           ulItem.classList.add("transY");
117.         }
118.         count++;
119.         ulItem.style.transform="translateY("+(-count*liHeight)+"px)";
120.         //找出当前每一张图动画完成时间
121.         setTimeout(function(){
122.           if(count>=ulItem.children.length-1){
123.             count=0;
124.             //移除过渡类
125.             ulItem.classList.remove("transY");
126.             ulItem.style.transform="translateY(0px)";
127.           }
128.           //让右边的元素动画对应
129.           //rigthBtnlist[count].click();
130.         },500)
131.       },speed)
132.     }
133.   }

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。