位置: 编程技术 - 正文

jQuery动画效果图片轮播特效(jquery动画效果代码)

编辑:rootadmin

推荐整理分享jQuery动画效果图片轮播特效(jquery动画效果代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery做动画,jquery中的动画是怎样用的,jquery动画库,jqueryanimate动画,jquery做动画,jquery动画效果大全,jqueryanimate动画,jquery做动画,内容如对您有帮助,希望把文章链接给更多的朋友!

从这一章节开始,我将会为大家陆续的介绍利用Jquery完成特效动画。先来看看这一节所介绍的特效:传统轮播。

一、需求分析

1. 提供很多尺寸相等的图片,一排紧挨着显示。

2. 左右有两个切换按钮,用来控制显示上一张还是下一张。

3. 右下方有指示器"小圈圈",用来提示显示到第几个图片;也可以点击它,进行图片的切换。

4. 每隔一个固定的时间,图片会自动滚动。

5. 当鼠标放到图片上面的时候,会停止自动滚动;当鼠标离开后,再经过固定间隔时间后,又会自动播放。

二、代码剖析

1. 用html代码搭建框架

1> id为container的div,是整个轮播效果的容器。2> id为content的ul,里面存放的内容就是界面上面显示的滚动的图片。

3> id为btn的div,里面的两个子元素就是用来切换上一张还是下一张的按钮。

4> id为indicator的ul,用来显示指示器。

2. CSS代码改变显示样式

1> 下面两句代码,清除掉浏览器默认的间隙。

2> 设置父容器的样式。

由于显示的图片大小就是 X , 所以这里的父容器的大小也设置这么大,这里设置的margin,就是让父容器水平居中,垂直距离顶部px,overflow表示如果显示的子元素超出了container的范围,就隐藏掉(注:由于显示的图片是一排显示的,如果不加上overflow: hidden这个属性的话,就露馅了,去掉这个属性的话,效果如下:)。

也就是说,如果不加上overflow: hidden 这个属性的话,所有的图片就会一排全部显示出来了。

最后一个就是定位属性 position: relative; 由于container是父容器,所以应该设置为relative,而它的所有的子元素要进行绝对定位的话,他们的position应该设置为absolute。这就是所谓的 "子绝父相" 原则。在绝对定位中都这么使用。

jQuery动画效果图片轮播特效(jquery动画效果代码)

3> 设置content的样式

注意到,content的width属性设置为了px,这是为了保证它能够存放足够多的图片。默认情况下,content中所有的li是块级元素,也就是他们会上下排列;所以加了一句float:left;让他们左右排列。而父级元素container设置了overflow: hidden, 所以这些左右排列的图片只能看到第一个。4> 设置左右切换按钮的样式

注意到,在获取左右按钮的时候,他们是取自同一张图片icons.png。只是图片截取的位置不一致,这就是所谓的"精灵"。就是为了减小图片占用大小,而把很多的小icon放置在一张图片上面,然后通过定位截取的办法,获取想要的部分。(注:关于怎样定位icon? 1. 写代码慢慢调节;2. 用精灵裁切定位软件,如:CSS Sprites等)。图片设计大致如下:

这张图片中,不仅包含了左右切换按钮,指示器的按钮也一并给出了,所以在书写指示器按钮的css代码时候,同样也可以使用这张图片。

4> 设置指示器的样式

代码中 #indicator li 设置的background的图片就是上图中空心的小圆圈,而 #indicator li.current 设置的background的图片就是上图中实心的大圆圈。所以刚开始的时候,默认选中第一个。3. 用JQuery添加交互效果

1> 切换下一张(点击右边按钮)

changeImage 函数

代码中,当DOM元素加载完毕,就执行了$('#container #btn #rightBtn').click(rightClick), 也就是立刻执行了切换图片操作。在rightBtnClick函数中,先进行了content是否正在进行动画的判断,这样做的目的:防止动画在执行的过程,用户又进行强制的执行其他动画,会产生干扰,最终导致动画效果混乱。

如果有的话,则将标志变量nowImage指向下一个图片,并且执行changeImage函数中的代码:1. 将content中的所有图片左移一个图片大小的宽度;2.将指示器的图片也移动到对应的位置。

如果没有的话,并且图片现在是显示到了最后一个,则先执行动画,执行完毕后,立刻将content中所有的图片内容拉回到第一个,但是这里任然会穿帮,因为当前图片显示为最后一个后,你继续执行动画,是没有任何效果的,所以在这个动画执行期间是没有任何反应的,当动画时间执行完毕后,会突然在界面上出现第一个图片。

设计思想:为了解决这个问题,解决方案就是在这些图片之后追加一个与第一张相同的图片;这就是传统轮播的主要设计思想。所以当图片滚动到倒数第二章的时候;首先执行滚动动画,也就是滚动到预先准备的与第一张一模一样的图片,看起来似乎是滚动到了第一张,其实不然。在动画执行完毕后,立刻将content中所有的图片拉回到第一张。流程图如下:

所以此刻修改一点代码,在代码的开头追加第一张图片

在rightBtnClick代码中,将nowImage == totalCount - 1 修改为 nowImage == totalCount - 2。2> 切换上一张(点击左边按钮)

代码与点击右边按钮类似

3> 点击指示器按钮进行图片切换它的设计思路,就是获取图片的索引,然后调用changeImage函数就可以了。

4> 添加定时执行动画的功能也就是定时的调用点击右边按钮的代码;添加如下代码:

5> 鼠标悬停在图片上,停止滚动;鼠标离开图片后,继续滚动也就是对定时器进行开启和关闭;添加如下代码:

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

至此,一个传统轮播的效果就实现了,希望大家可以学以致用。

jquery对复选框(checkbox)的操作汇总 jquery操作复选框(checkbox)的个小技巧。1、获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name

Jquery uploadify上传插件使用详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可

基于jquery实现的仿优酷图片轮播特效代码 本文为大家分享了一种常见的并且比较复杂的轮播效果,就是优酷主界面的轮播图,效果图如下:我们在书写代码之前,先分析效果图的结构:1.左右两

标签: jquery动画效果代码

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

上一篇:jQuery动画效果实现图片无缝连续滚动(jquery的动画效果)

下一篇:jquery对复选框(checkbox)的操作汇总(jq复选框选中触发事件)

  • 母公司处置子公司合并报表
  • 公帐的钱可以转给个人私帐可以吗
  • 利润表管理费用怎么算
  • 滞留票的处理
  • 个人所得税交税怎么交的
  • 商铺售后返租的会计分录
  • 预收账款怎样清零
  • 物流快递代收货款怎么退
  • 出租屋物品损坏怎么赔偿
  • 工资薪酬所得税税率
  • 现金不够怎么办
  • 核定征收企业所得税能否享受税收优惠
  • 没有订立合同的著作权属于什么人
  • 企业出售房屋交什么税
  • 未确认融资费用摊销额怎么计算
  • 承兑跨省是不是不能用
  • 股权激励会计处理分录和企业所得税
  • 客户扣款会计分录明细科目
  • 商贸公司怎么结算成本
  • 公司买厨房用品计入什么科目
  • 政府返还的资金如何处理
  • 流动资产固定资产和无形资产都是资产类账户
  • 结转本年利润之后还要干啥
  • 审核记账流程
  • 如何删除驱动器里面的文件
  • php-ml
  • 外资企业采购退税流程
  • 金融租赁融资融物
  • 招行网银专业版怎么登陆
  • 上飞机可以带2个充电宝吗
  • php不使用内置函数的情况下,输出数组中重复最多的元素
  • 小规模企业现金怎样管理
  • 应付债券相关分录
  • 增值税预征税率是多少
  • springcloud分布式微服务组件
  • 利息补缴税款加收利息计算
  • 小企业会计准则主要按照什么计量
  • mysql数据库恢复方式
  • 企业存货核算范围
  • 广告费的税额计入哪里
  • 研发支出资本化支出在资产负债表哪里体现
  • 消费税的应纳税额的计算
  • 购进溢余分录
  • 1元换购的商品是正品吗
  • 事业单位外出参观培训心得
  • 在防控新型冠状病毒肺炎期间经营者违反价格法
  • 手撕发票是
  • 主营业务成本和管理费用的区别
  • 允许税前扣除的税金及附加包括哪些
  • 进项发票超过期限不认证怎么办
  • mysql查询语句大全讲解
  • mysql5.5改密码
  • win10出现
  • windows xp怎么打开
  • 高效管理者的三大技能 罗伯特卡茨
  • cool file viewer pro是什么软件
  • 电脑上dell是什么意思
  • Win10 Mobile RS2预览版14915上手视频评测
  • 应用程序发生异常如何解决
  • windows8无线网络
  • win8.1使用
  • win7怎么样激活
  • Linux系统配置IP地址
  • linux的命令行界面是什么意思
  • 微信小程序实现轮播图
  • 如何用vs默认打开unity脚本
  • JavaScript Math.ceil() 函数使用介绍
  • 请简述vue-router路由的作用
  • androidweb view
  • python开发软件教程
  • unityc#脚本
  • php使用js
  • js访问thymeleaf值
  • Javascript字符串奇数位替换
  • 电子税务局如何下载财务报表
  • 定额发票怎么查看有效期
  • 关于研发费用的审计程序,下列说法中错误的是
  • 浙江省个体工商户税收政策
  • 宁波北仑有哪些服装厂
  • 企业2017年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设