怎么使用js实现上下滑动轮播

这篇“怎么使用js实现上下滑动轮播”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用js实现上下滑动轮播”文章吧。

一、效果图

二、设计思路

遍历所有的元素使得鼠标点击右侧小图时，图片变亮并且根据偏移值加上红框。点击右边的小图左边出现对用的图片。

利用循环计时器，克隆ul里面的第一个元素使得连续循环滑动。

鼠标进入时循环滑动停止，离开时继续。

设置上下按钮，当第一张图片的offsetTop值为0时，下面按钮出现，当到达底部最后一个元素时，上面按钮出现，底部按钮消失，当在整个元素中间时，上下按钮都出现，每点击一次按钮移动一个格子，左边图片也对应改变。

三、核心代码

//找到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<righttBtnList.length;i++){                if(i!=index){                    righttBtnList[i].classList.add("top-white");                }            }        }        //启动计时器动画        function Animate(){            //写执行代码            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实现上下滑动轮播”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。