位置: 编程技术 - 正文

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判断)

  • 企业所得税会计科目
  • 工资里个人代扣款是什么
  • 个人住房交不交个税
  • 过桥费是多少
  • 现在什么情况下
  • 小规模纳税人农产品进项税抵扣
  • 原始凭证丢失如何处理会罚款吗
  • 商贸公司购进农产品可以抵扣吗
  • 公众号注册验证方式
  • 合伙制公司有董事会吗
  • 一般纳税人如何零申报
  • 发票第一联盖章吗
  • 公司开设食堂需要哪些手续
  • 新注册公司什么时候报个税
  • 税后2.5万工资税前多少钱
  • 收到投资款怎么做记账凭证
  • 处理固定资产怎么计算
  • 对个体工商户个人的认识
  • 管理会计完全成本法和变动成本法例题
  • 系统日志在哪里打开
  • 怎么进入登录
  • 经费支出渠道
  • php text
  • php精彩编程200例
  • 房产证和不动产权证都要办理吗
  • 企业所得税教育经费列支范围
  • 高新技术企业研发费用占比要求
  • 滴滴发票开公司名称可以抵扣进项吗
  • vue中数字运算
  • opencv1.0
  • admit允许
  • 发票写的是信息怎么办
  • 无形资产转让的最低收费额如何确定?
  • 会议费需要纳税调整吗
  • java io读写
  • C语言中如何计算除法
  • 收入纳税退税
  • 小规模纳税人购进农产品可以抵扣进项税吗
  • 浏览器测试网页
  • 个人所得税是可以全部退回吗
  • 一般纳税人税率2023
  • mysql workbench简介
  • MySQL的主从复制基于什么实现的?
  • sqlserver 删除数据
  • 什么叫政府补贴学位生
  • 收到的技术服务费计入什么科目
  • 存货跌价准备什么科目
  • 应付账款多好还是少好
  • 固定资产盘亏是营业外支出吗
  • 转售水电费收入确认
  • 施工企业的具体工作有哪些
  • 错误凭证如何处理
  • 物流行业会计核算特征有哪些
  • mysql中的查询
  • sql取两个时间的间隔天数
  • 微软每月补丁更新一般于什么时间发布
  • winxp如何将两个分区合并成一个分区
  • iconv.exe
  • window mobile系统
  • 怎么更改电脑键盘语言
  • windows8无线网络
  • 苹果win10更新48%不动了
  • js数组常用的方法及用法
  • android RecycleView 面试
  • webpack使用场景
  • ar现实增强设备
  • 使用js如何创建元素
  • Unity Enemy behaviour
  • android按钮怎么放置在下方
  • python设计gui
  • android错误报告
  • 公司在异地办公
  • 我国历年财政支出总额
  • 扣缴义务人怎么改不过来呢
  • 306医院改名什么了
  • 服务费交哪个税目的印花税
  • 地税登录密码忘记了怎么办
  • 在北京电子税务局怎么缴纳社保费
  • 江苏盐在什么地方
  • 2021年房产税收新政
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设