位置: 编程技术 - 正文

Jquery轮播效果实现过程解析(jquery轮播代码)

编辑:rootadmin

推荐整理分享Jquery轮播效果实现过程解析(jquery轮播代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery的轮播效果,jquery实现轮播,jquery的轮播效果,jquery自动轮播源码,jquery自动轮播源码,jquery的轮播效果,jquery轮播图自动播放,jquery的轮播效果,内容如对您有帮助,希望把文章链接给更多的朋友!

轮播是学习jquery开始的第二个实现的动效,也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题,请教过很多人,也多次问过度娘。今天,也不敢果敢的说,可以马上写好一个轮播。希望是通过随笔的方式,记录下一些思维过程。

首先是html结构,一个简单的轮播,单张图片无缝轮播,主要分为三大层:div>ul>li,li里面的img图片。

其次,css样式:div固定住宽高,overflow:hidden;ul的宽度建议是动态获取(下一步会讲是怎么获取);关于li我习惯使用浮动,让他们依次排列,在ul上要记得清楚浮动(clear:both)。

重要的是jquery的方法,主要有用到的有animate(),setInterval(),hover()。在写方法之前,缕清一下动效的逻辑:图片依次循环自右向左滑过,当滑完最后一张时,第一张显示,如此重复。

1、获取li的个数length和宽度width

因为是无缝轮播,要实现自然的过渡,我们还得做点什么,当图片滑到最后一张时,怎么样才会很自然的过渡到第一张,这个时候,如果第一张就在最后一张的后面,就可以了,所以,我们需要将第一张clone后append到li的最后

$('li:first').clone().appendTo('ul')2、获取ul的宽度:ul的宽度等于所有li的宽度加上克隆的li的宽度

ulWidth=liWidth*(len+1)似乎准备工作都做好了,那下一步我们就尝试让他动起来,首先想到是animate()方法:

animate( properties [, duration ] [, easing ] [, complete ] ),

Jquery轮播效果实现过程解析(jquery轮播代码)

    第一个参数properties:css的属性和值的对象,决定动画的效果,是上下还是左右等;

    第二个参数duration:完成一个动画的时间,默认是,单位是毫秒;

    第三个参数easing:动画过渡使用的缓动函数,默认是swing(linear,swing),一般不用这个参数;

    第四个参数complete:是指完成动画后执行的操作。

我们的动效是自右向左,所以通过改变ul的margin-left值来实现

其中index指的是li的索引值,当li的索引值等于li的length值的时候,也就是动画执行到了最后一张,那么直接让ul的margin-left为0,li的索引值也为0。

这样还存在一个隐患,暂时不提。

下一步,当鼠标离开div的时候,图片自动播放。这是要用到hover()和setInterval()

setInterval()在W3C是这样解释的:按照指定的周期(以毫秒计)来调用函数或计算表达式。不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

这样,一个自动播放的功能似乎就实现了,可是我们还可以发现一个bug,第一帧停留的时间似乎有些长,为什么呢?

这个问题还是昨天得到了解决,当图片执行到最后一张时,他的index马上变为0,然后会执行两次,因此在这个判断中,我们需要当index为0时,让它自加1,index++,放到判断条件下。

还有一个问题,是昨天发现的,在这个轮播里面有两个时间,一个是动画执行时间,一个是播放时间,前者的时间一定要比后者的时间小,原因是js的执行顺序呢是自上而下的,,如果时间一致或者后者时间小于前者,那么,在这个时差里,动画将进不到判断条件里来,会一直播放,那么轮播就失败了。今天就分享到这里,下一次分享加上左右箭头和hover圆点的轮播效果。

附上完整的代码:

标签: jquery轮播代码

本文链接地址:https://www.jiuchutong.com/biancheng/384045.html 转载请保留说明!

上一篇:修复jQuery tablesorter无法正确排序的bug(加千分位数字后)(修复硬盘)

下一篇:Jquery判断form表单数据是否变化(jqueryif判断)

  • 个体户可选择不交税吗
  • 累计减税费用是什么意思
  • 增值税加计扣除政策
  • 小微企业增值税减免账务处理
  • 企业进行业务预算的编制技巧
  • 往来票据怎么填写
  • 垃圾处理的公司有哪些
  • 房地产退房款会计分录
  • 资产负债表金额越来越大代表什么
  • 未认证的增值税发票如何开具红字发票
  • 消费税计算视频讲解
  • 公司低价卖房土地增值税计税方法是什么
  • 其他货币资金的概念
  • 递延和摊销
  • 销售不动产差额征收增值税
  • 全年实现利润总额为6035
  • 土地闲置费能否扣除
  • 企业不动产如何带抵押转让
  • 原材料采购的会计核算风险
  • 当企业预收款项无需退回
  • 结转完工产品成本的计算
  • 华为matex3价格表
  • 个人劳务费几个点
  • 如何打开mac系统
  • 存出投资款现金流量表选什么
  • win10粘贴复制无效
  • 电商快递费怎么算
  • 计提减值时注意什么
  • 网络延迟高不稳定怎么办
  • 清晨暴雨的说说
  • 手把手教你用气焊视频
  • 电票怎么付给别人
  • webpack打包步骤
  • 原生ajax和axios的区别
  • 可解释深度学习:从感受野到深度学习的三大基本任务:图像分类,语义分割,目标检测,让你真正理解深度学习
  • Vue3通透教程【十二】TS类型声明优势
  • linux用cat命令查看
  • 房地产企业税负低如何向税务局解释
  • 一个小柜的货代费用
  • 金税盘插电脑上没反应是怎么回事
  • 成本收入核算表
  • 费用性税金包括增值税吗
  • 让渡资产使用权包括
  • 销售赠送赠品会计处理
  • 个人所得税的计算公式方法Excel
  • 年金一定是一年一次吗
  • 缴纳车辆购置税有发票吗
  • 资产处置损益属于什么会计要素
  • 房地产企业城建税和教育费附加怎么算
  • 期末余额和期初余额
  • 低预算高要求
  • 坏账准备具有哪些特征
  • 转出未交增值税会计处理
  • 应付职工薪酬为负数什么意思
  • 汇算清缴要补交0.01怎么调成0
  • 工程款结清确认书模板
  • 公司增资有什么作用
  • mysql时间语句
  • mysql 临时表
  • u盘界面可以设置背景吗
  • mac怎么打开mac系统
  • centos安装位置选择
  • ntdll.dll no matching
  • 苹pp助手
  • mac如何修改hosts登录Googledrive
  • avgserv9.exe是什么进程 avgserv9进程的详细介绍
  • win73d设置怎么设置
  • win8.1怎么关闭更新
  • linux 如何查看端口
  • jquery实现回到顶部
  • opengl怎么用
  • 学node.js需要什么基础
  • python正则函数
  • 如何用python编写一个程序
  • jquery ajax局部加载方法详解(实现代码)
  • 拟录用人员公示后还会递补吗
  • 北京西城区税务所
  • 12366纳税服务热线存在的问题
  • 房屋租赁管理部门制发的《房屋租赁证》
  • 2018年北京个人所得税查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设