50行代码搞定无限滑动幻灯片
slider轮播组件,在各类网站上出现及其频繁,有渐隐式的,滑动式的等等一系列。
栗子在这:
但我当初学习写轮播时却被各种入门教程搞得焦头烂额。不是代码太复杂,就是封装太严重,初学者很难理清思路,今天我们就写一个最基本轮播组件(当然功能也要完整),并探寻其中的规律。
观察各类轮播组件,我们不难发现一个功能完善的组件具备如下几个特点:
前进后退按钮控制单张幻灯片
索引按钮可以直接选择某张幻灯片
mouseover 可取消滑动,mouseout 恢复滑动
部分幻灯片支持无限滑动
支持手势操作
今天我们以构造一个最基本的幻灯片组件为出发点,实现前4个特点,只用50行js。
一般原理
我们本次的幻灯片是滑动式幻灯片,观察不难发现多张幻灯片其实是连续的,但我们却只能看见一张幻灯片,其它的幻灯片其实是被隐藏掉了。说起隐藏我们想起一个属性 overflow:hidden
。对,滑动式幻灯片的关键就在于隐藏。幻灯片是多张的就像一个队列一样,一般都包裹在 ul
标签的 li
中,而ul
外层的容器(container)--就是我们的视窗,它的宽度一般只有一张幻灯片的大小,再在其上设置overflow:hidden
,其余的幻灯片便被隐藏掉了。
幻灯片队列的宽度是各张幻灯片宽度的总和,他被固定在视窗内,我们通过改变队列的 left
或 margin-left
便能控制队列的位置--哪张幻灯片可以被显示在视窗中。在js中我们会设置一个全局变量,通过控制全局变量来控制幻灯片队列的位置。
有了前面两点的基础我们就可以搞定一个普通的滑动幻灯片了,但如何让它无限滑动呢?无限滚动的方案有很多种,但大多较复杂,我们这次介绍一个最简单方案。原理是这样的,假如我们有一个幻灯片队列 1 2 3 4
,我们克隆前后两个幻灯片补充到队列中变成 4 1 2 3 4 1
。当队列运动到第二个4
,再次滑动到第二个1
,然后迅速闪回第一个1
,因为速度极快在视觉上我们无法分辨,便造成了无限滑动的假象。有图有真相哦。。?
js控制逻辑
1.我们先克隆第一张和最后一张,放置到队列中。
const first_slide = slide_items[0].cloneNode(true);
const last_slide = slide_items[slide_items.length-1].cloneNode(true);
slide_list.insertBefore(last_slide, slide_items[0]);
slide_list.appendChild(first_slide);
2.这里有四个操作 (1). slide 函数负责滑动及主要逻辑 (2). tab 函数负责索引,动态添加类 (3). 为前后箭头添加处理逻辑 (4). 处理鼠标操作
3.在 slide 函数里我们定义一个 cycle 变量,由它来判断幻灯片是否应该循环闪回。 由 direction 判断幻灯片的滑动方向,滑动前一张为 -1 后一张后 1 ,这里的 direction 默认设置为 1 即正方向,因为 this 指向的是全局对象 window ,window 没有 prev 的 id 。在 cycle 条件里我们添加一个 transitionend
事件相当于滑动后的回掉,依赖这个事件在幻灯片滑动执行完毕后立即执行里面的闪回操作。
function slide() {let cycle = false;const direction = (this.id == 'prev')? -1: 1;current += direction;slide_list.style.left = -4*current + '00px';slide_list.style.transition = 'left 0.5s';cycle = !!(current == 0 || current > len);if (cycle) {current = (current === 0)? len : 1;slide_list.addEventListener("transitionend", function() {slide_list.style.left = -4*current + '00px';slide_list.style.transition = 'left 0s';})}tab(current-1);
}
4.在 tab 函数中动态设置类,并为每个 tab 设置 click 事件。
function tab(i) {slide_dots_items.forEach(function(i){ i.classList.remove('current')});slide_dots_items[i].classList.add('current');
}
slide_dots_items.forEach(function(i) {i.addEventListener('click', function() {current = [...slide_dots_items].indexOf(i);slide();})
});
5.设置一个 timer 计时器,每3000毫秒调用一次 slide 函数
timer = setInterval(slide,3000);
6.最后添加鼠标事件,mouseover 取消滑动,mouseout 恢复滑动。
container.onmouseover = function (){clearInterval(timer);
};
container.onmouseout = function (){timer = setInterval(slide,3000);
};
总结
滑动幻灯片的基本逻辑就是这些,主要需要一个全局变量 current 来控制滑动位置,并通过一定的限制条件来重置 current。
通过添加 transitionend
事件监听滑动是否结束从而迅速闪回,达到貌似无限滑动的效果。
本文主要以分析一个幻灯片组件的原理,探寻其中的规律为主,但是在响应式为主的设计浪潮下,我依然推荐你在项目中使用那些支持手势操作封装良好的组件。有几个出名的插件如下⛄️猜猜哪个组件需要25美金的证书?。。。
slick 号称一旦拥有,今生无憾的滑动组件.....
flickity 一个功能完善的滑动组件 *jqueryfree
lory 也还不错
50行代码搞定无限滑动幻灯片相关推荐
- php 文字弹幕效果代码,50行代码搞定弹幕效果
前言 就在最近这几年,弹幕这个东西慢慢地流行了起来.我们在网上看视频或者看直播都能见到弹幕的身影,有时候弹幕的内容甚至比视频本身内容还要精彩.本人也是很喜欢弹幕这个东西,看到精彩处刷个弹幕都是常事.正 ...
- C++游戏开发,超简单的入门项目,50行代码搞定开心消消乐
一提到开发游戏,很多人都会觉得要很高深的技术,有一种望尘莫及的感觉.其实要编一款小游戏也没有想象的那么难,下面跟着小编一起来看看C++是如何一步步制作游戏的. 本文的代码下载地址在文章末尾,有需要的同 ...
- resnet50代码_13、SOTA论文实践-学习ResNet(80行代码搞定残差backbone网络)
0.论文 Camera Distance-aware Top-down Approach for 3D Multi-person Pose Estimation from a Single RGB I ...
- 35行代码搞定事件研究法(下)
作者简介: 祝小宇,个人公众号:大猫的R语言课堂 前文推送: 35行代码搞定事件研究法(上) Hello亲爱的小伙伴们,上期已经讲到如何对单一事件日计算超额收益,本期将会教大家如何针对多个股票多个事件 ...
- 万万想不到 10行代码搞定一个决策树
01决策树模拟实验 文章目录 01决策树模拟实验 要求 决策树简单介绍 搭建环境 产生数据集 划分训练集和测试集 生成决策树 Cross-Validation法 可视化决策树 10行代码搞定决策树 要 ...
- 50行Python搞定京东商品抢购
50行Python搞定京东商品抢购 之前写的一篇京东抢购商品传送门,由于京东账号登录图片验证码改为了极验验证码,一直在尝试怎么用请求来去破解,而不是selenium去模拟点击,但是技不如人搞不定... ...
- python做事件研究法_35行代码搞定事件研究法(上)
作者简介: 祝小宇,个人公众号:大猫的R语言课堂 这期大猫课堂将会教大家如何用35行R代码写出最有效率的事件研究法. 注意,本代码主要使用data.table完成,关于data.table包的相应知识 ...
- 国外stripe支付,超简单几行代码搞定
国外stripe支付,超简单几行代码搞定 海外的项目 需要stripe支付 很简单 几行代码 先加入依赖: compile 'com.stripe:stripe-android:6.1.2' 总共两种 ...
- java微信支付代码_10行代码搞定微信支付(Java版)
原标题:10行代码搞定微信支付(Java版) 微信支付痛点 对于大多数同学来说,要开发微信支付可不简单.附上微信支付官方文档网页链接 从文档上可以看出,你需要解决很多问题,我就随便挑几个吧. xml与 ...
最新文章
- datatable导出Excel
- Python正则表达式介绍 re.findall(pattern, str, flag=0)/re.I re.L re.M
- kafka 集群_10分钟搭建单机Kafka集群
- python的两种循环结构_python分支和循环结构
- 操作系统学习笔记-2.1.1.进程的定义、组成、组织方式、特征
- Flutter获取随机数 Dart语言核心基础
- 【Zepto笔记】Zepto.js
- 使用mysql innodb 使用5.7的json类型遇到的坑和解决办法
- 如何在 iPhone 和 iPad 上使用与你共享?
- 艾宾浩斯记单词 记忆周期时间表
- 史上最全Python快速入门教程
- NeRF神经辐射场代码流程图
- 思科路由器命令大全(一)
- 红米note9pro和华为Nova8哪个好 红米note9pro和华为Nova8哪个更加值得入手
- iOS 指南针的制作 附带源码
- 灯塔资产系统(ARL)部署
- linux 怎么看浏览器,Linux下浏览器比比看
- C语言写的小游戏源码,c语言小游戏源码(华容道)
- 企业必备的13种体系认证大盘点!
- 你知道吗,Nero也能当虚拟光驱使