本文实例为大家分享了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)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
