博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery实现无缝轮播
阅读量:5734 次
发布时间:2019-06-18

本文共 2399 字,大约阅读时间需要 7 分钟。

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/

转载于:https://juejin.im/post/5abc95dc6fb9a028d3757b09

你可能感兴趣的文章
我的友情链接
查看>>
centos5.9使用RPM包搭建lamp平台
查看>>
关于C#面向对象2
查看>>
Javascript String类的属性及方法
查看>>
vim编辑器如何添加或删除多行注释
查看>>
[LeetCode] Merge Intervals
查看>>
iOS开发-按钮的基本使用
查看>>
在QT和SDL搭建的框架中使用OPENGL在SDL窗口上进行绘图
查看>>
REST技术第三步 @BeanParam的使用
查看>>
模板 读入挂!
查看>>
SharePoint 读取 Site Columns 的数据并绑定到DropdownList
查看>>
Python中的对象行为与特殊方法(二)类型检查与抽象基类
查看>>
使用 axios 详解
查看>>
通信基站(dfs回溯,思维)
查看>>
nginx web加密访问
查看>>
iOS - Regex 正则表达式
查看>>
SYS_CONTEXT函数返回IP地址的一些误解
查看>>
第 68 章 Logical Volume Manager (LVM)
查看>>
膝盖中了一箭之康复篇-第八个月暨2月份目标总结
查看>>
IPA提交APPStore问题记录(一)
查看>>