js实现上下滑动轮播

3403771864 发布于2022-10-16 15:39 / 229人阅读

　　本文主要讲述关于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)
　　}
　　}

　　上面是全部代码内容，欢迎大家多多关注。

私有云云服务器滑动轮播 jquery滑动轮播 js图片自动轮播 js多张图片滚动轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128011.html

原生JS实现滑动轮播图

摘要：效果实现原理纯粹只使用了发现还是比较简单的，并不需要借助别的插件或类库来实现核心是把图片组合成一行序列，通过左右移动，以及父元素的来决定显示的图片简单画了一下搭建基本界面这里主要分成三个部分，两个向左向右的箭头，圆点序列，图片序列全效果 showImg(https://segmentfault.com/img/bVbqHhE?w=479&h=235); 实现原理纯粹只使用了html...

techstay 2019-08-02 16:10 评论0 收藏0
原生JS实现滑动轮播图

摘要：效果实现原理纯粹只使用了发现还是比较简单的，并不需要借助别的插件或类库来实现核心是把图片组合成一行序列，通过左右移动，以及父元素的来决定显示的图片简单画了一下搭建基本界面这里主要分成三个部分，两个向左向右的箭头，圆点序列，图片序列全效果 showImg(https://segmentfault.com/img/bVbqHhE?w=479&h=235); 实现原理纯粹只使用了html...

ningwang 2019-08-30 15:43 评论0 收藏0
原生JS实现滑动轮播图

摘要：效果实现原理纯粹只使用了发现还是比较简单的，并不需要借助别的插件或类库来实现核心是把图片组合成一行序列，通过左右移动，以及父元素的来决定显示的图片简单画了一下搭建基本界面这里主要分成三个部分，两个向左向右的箭头，圆点序列，图片序列全效果 showImg(https://segmentfault.com/img/bVbqHhE?w=479&h=235); 实现原理纯粹只使用了html...

Flands 2019-08-26 13:39 评论0 收藏0
干货--手把手撸vue移动UI框架：滑动轮播

摘要：其次父组件中负责通用的功能，以及轮播的整体架构，其结构如下。下面的是一种移动端的适配方案。接下来实现函数运用动画切换到指定下标的子项到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。前言昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。效果展示老规矩，咱们...

MSchumi 2019-08-22 15:12 评论0 收藏0
干货--手把手撸vue移动UI框架：滑动轮播

摘要：其次父组件中负责通用的功能，以及轮播的整体架构，其结构如下。下面的是一种移动端的适配方案。接下来实现函数运用动画切换到指定下标的子项到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。前言昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。效果展示老规矩，咱们...

时飞 2019-08-05 18:02 评论0 收藏0