1 思路
1.1 思路
模仿多人跳绳,一个跳进去,再跳出来,第二个人跳进去,第一个人马上回来排队,除此类推。运用到轮播的方式:分为三种状态,展示状态currentImg、离开状态leavingImg、排队状态enterImg,图片状态顺序切换,形成循环。
1.2 效果图
2. html和css布局
无缝的轮播 复制代码
3. js代码
3.1 原始代码
$('.images > img:nth-child(1)').addClass('current') // 初始化,第一张图片添加current类$('.images > img:nth-child(2)').addClass('enter') // 后面图片添加enter类$('.images > img:nth-child(3)').addClass('enter')$('.images > img:nth-child(4)').addClass('enter')$('.images > img:nth-child(5)').addClass('enter')let n = 1setInterval(()=>{ let currentImg = $(`.images > img:nth-child(${x(n)})`) // 获得正在显示的img元素 let nextImg = $(`.images > img:nth-child(${x(n + 1)}`) // 获得准备进入的img元素 currentImg.removeClass('current').addClass('leave') // 3s后,显示图片离开 .one('transitionend', (e)=>{ // 过渡动画结束时,此时图片类为leave,改变图片的类为enter $(e.currentTarget).removeClass('leave').addClass('enter')}) nextImg.removeClass('enter').addClass('current') // 下一张图片进入n++},3000)// 以下为封装函数function x(n) { // 保证n在1-5循环 if (n > 5) { n = n % 5 if (n === 0) { // 3的倍数设置为3,对应第3张图 n = 5 } } return n}复制代码
3.2 优化后
let ninit() // 初始化,第一张图片current显示,其余图片enter排队setInterval(()=>{ makeLeave( getImage(n)) // 通过改变类,让current图片离开,变为leave状态 .one('transitionend', (e)=>{ // 达到leave状态那一刻,马上向enter状态过渡 makeEnter($(e.currentTarget))}) makeCurrent(getImage(n+1)) // 让下一张图片显示n++},3000)function init() { n = 1 $(`.images > img:nth-child(${x(n)})`).addClass('current') .siblings().addClass('enter')}function x(n) { if (n > 5) { n = n % 5 if (n === 0) { // 3的倍数设置为3,对应第3张图 n = 5 } } return n}function getImage(n) { return $(`.images > img:nth-child(${x(n)})`)}function makeCurrent($node){ return $node.removeClass('enter leave').addClass('current')}function makeLeave($node){ return $node.removeClass('enter current').addClass('leave')}function makeEnter($node){ return $node.removeClass('leave current').addClass('enter')}复制代码
4. 总结
4.1 思路
css负责提供所有的状态,js负责切换状态。
4.2 jQuery相关api
- $()
- removeClass()
- addClass()
- siblings()
- one('transitionend',fn)
5 参考衔接
饥人谷jQuery相关课程https://xiedaimala.com/