位置: 编程技术 - 正文

基于jquery实现轮播特效(jquery实现轮播图步骤)

编辑:rootadmin

推荐整理分享基于jquery实现轮播特效(jquery实现轮播图步骤),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery实现轮播图步骤,jquery实现轮播,jquery 轮询,用jquery制作轮播图效果,jq轮播图实现简单代码,用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

var len=$('li').length, liWidth=$('li').width,

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

$('li:first').clone().appendTo('ul')

2、获取ul的宽度:ul的宽度等于所有li的宽度加上克隆的li的宽度

ulWidth=liWidth*(len+1)

基于jquery实现轮播特效(jquery实现轮播图步骤)

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

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

    第一个参数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/384974.html 转载请保留说明!

上一篇:jquery插件Jplayer使用方法简析(jQuery插件封装时如要实现链式编程,需要)

下一篇:jQuery 监控键盘一段时间没输入(html键盘监听)

  • 来料加工账务处理举例
  • 2021年销售农机免增值税吗
  • 技术开发免征增值税吗
  • 个体户一个月能领多少发票
  • 公司基本户如何注销
  • 现金流量科目怎么选择
  • 公司给离职员工多发工资怎么办
  • 公司单位性质怎样填写
  • 小规模季度申报怎么申报
  • 样品销售如何记账
  • 什么叫企业过桥资金
  • 销售土地如何交增值税
  • 并购重组资产怎么算
  • 补记固定资产
  • 地税保险单位编号是什么
  • 购进原材料没有发票怎么做分录
  • 出差票据应该如何记账
  • 印花税是发票吗
  • 小规模纳税人装修费用计入什么科目
  • 增值税抵扣联退税多少
  • 财务费用在汇算清缴时填哪里科目
  • 主营业务收入写不写明细
  • 增值税小规模纳税人减免增值税
  • 收到退回残疾金分录
  • 什么是大头小头
  • 管理费用没发票能入账吗
  • 出售交易性金融资产的记账凭证
  • 固定资产怎么录入系统
  • mac怎么连接蓝牙鼠标
  • 如何开启windows10云服务
  • QuickBooks - QuickBooks是什么进程 有什么用
  • 资产负债率如何评价
  • 利息如何做会计分录
  • 经费支出渠道
  • 用代管资金付出的钱
  • 购物卡销售的重点工作是什么
  • 股东借款作为项目资本金
  • PHP:curl_errno()的用法_cURL函数
  • win10版本1909和22h2
  • rtp webrtc
  • php提示框
  • iis防盗链
  • php 重写 重载
  • php gettext
  • yii2前后端分离
  • 软件企业认定好处
  • 盒子模型的概念
  • mysql事件使用方法
  • 航天远程清卡
  • 坏账准备是什么性质的科目
  • 存货的成本包括哪几项
  • 只开发票没有合同也要印花税吗
  • 企业金融资产包括
  • 其他综合收益影响留存收益吗
  • 公司购买银行理财产品账务处理
  • 车辆购置税相关法律规定
  • 没有收入如何做账
  • var/lib/mysql
  • 事业单位小规模纳税人增值税账务处理
  • 坏账准备的计提分录
  • 可供分配的利润分配顺序
  • 认缴出资额承担责任怎么算
  • 纳税人和负税人区别通俗易懂
  • mysql5.5安装配置教程
  • 检查mysql是否正常
  • 电脑提示Windows照片查看器无法打开此图片
  • win7开机显示黑屏
  • 卸载声卡驱动有什么影响
  • linux 零拷贝技术
  • 命令窗口的作用
  • 麒麟linux系统怎么安装软件
  • android开发webview
  • linux中的shell编程
  • android recycleview 刷新
  • node.js调用c
  • js相等和全等
  • 安卓全局替换
  • activity启动原理
  • 重庆两江新区总工会社会化工作者待遇
  • 为什么企业减少注册资金的原因
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设