位置: 编程技术 - 正文

jQuery图片切换动画特效(jq点击图片让图片进行切换)

编辑:rootadmin

推荐整理分享jQuery图片切换动画特效(jq点击图片让图片进行切换),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery更换图片,jquery更换图片,jquery 图片旋转,jquery mobile 图片滑动,jq点击图片让图片进行切换,jquery 图片旋转,jq点击图片让图片进行切换,jquery实现图片切换,内容如对您有帮助,希望把文章链接给更多的朋友!

由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换。

思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子!

首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动XX像素,然后它左边的图片就会显示到框里,而原来的图片被隐藏了,单击右切换按钮的原理跟左按钮相似。但如果一直点同一个按钮的话,本来这个图片切换框只有3张图片的话,到最后一张的时候我们要做一个判断,让它移动回第一张或者最后一张。思路分析完了,下面看下我们的代码:

1、html代码

divBox是一个显示图片的框

imgBox是包住所有图片的DIV,我们实现效果也是移动这个DIV就可以了

bth放了两个button按钮用来切换图片

效果图:

2、CSS代码

#divBox设置图片显示框的宽高,绝对位置,边框,还一个重要的属性是overflow,溢出隐藏,当这个DIV里的内容超出这个DIV的大小时,溢出的部分会被隐藏掉。

jQuery图片切换动画特效(jq点击图片让图片进行切换)

#imgBox设置绝对位置和宽度,这个宽度取决于你所有图片宽度的总和,我这里是px,有三张图片,每张图片宽为px;如果这里不给宽度的话里面的小DIV无法左浮动。

.img设置左浮动,让所有图片向左浮动,保持在一条水平线上。

#bth 设置外边距,因为上面的div设置了绝对位置所以这个div会被盖住看不见了,所以把这个div挪出来。

效果图:

3、脚本代码

提示:记得导入jQuery包

脚本代码我写了两个单击事件,定义了一个保存距离左边位置的属性leftNum

首先看一下我们的左切换按钮单击事件:当我们单击按钮时,首先判断leftNum是否为0,如果为0,那么就是第一张图片,第一张图片左边已经没图片了怎么办,所以我们让他跳到最后一张图片,我们调用animate方法实现动画效果,这里我写的是left:left=-,为什么是-呢,left等于0时是第一张图片,left等于-的时候是第二张图片,left等于-时就是第三张图片,所以最后一张图片的位置=-(图片宽度)X(图片总数)-1。如果leftNum不为0时,我们就在原来的基础上加px。

右切换按钮的原理和左切换按钮相似,我就不解释那么多了。

4、小结:

看懂的小伙伴们可以自己去实践一下,毕竟实践出真理。

如果想做的更好看的同学,可以私信我,毕竟还有先功能我没讲,比如弄几个圆点在图片上面,当我们点击圆点时就动画切换到相对应的图片上,还可以设置图片轮播效果,每隔多少秒切换一次图片。

还有就是按钮的话,大家也可以弄的漂亮一些,可以在图片左边和右边加一个图片的按钮,这样和更美观

标签: jq点击图片让图片进行切换

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

上一篇:用jQuery的AJax实现异步访问、异步加载

下一篇:JQuery Ajax WebService传递参数的简单实例

  • 个体工商户怎么申请开普票
  • 利息收入纳税义务时点
  • 生产成本和营业成本的关系
  • 进项税额转出是在当月还是回到所属期
  • 办公室水电费计算公式
  • 税金及附加有啥
  • 端午节福利计入什么科目
  • 个人所得税离职补偿金优惠政策
  • 新政府会计制度下属于负债类科目的是
  • 会计信息采集审核需要多久
  • 销售息税前利润是什么
  • 出口没做免税申报怎样补税?
  • 取得无形资产当期收入
  • 个人独资企业税率表2023最新
  • 有限合伙企业收益分配
  • 甲供工程选择适用简易计税方法后,36个月
  • 研发费用进项税额需要转出吗
  • 电子发票能不能作废重开
  • 企业申报表填写错误
  • 注销往来怎么清理
  • 建筑公司工程款支付审批流程
  • 利息怎么算的计算公式举例
  • 专家费1000元个人所得税到底是税前还是税后
  • win7如何隐藏任务栏正在游戏的图标
  • 生产车间的各种费用
  • win10更新21h1后很卡
  • 允许企业所得税税前扣除的公益性捐赠的条件包括
  • PHP:oci_set_client_identifier()的用法_Oracle函数
  • 索尼笔记本电脑官网
  • 百合花怎么养殖简单
  • 委托软件开发费用怎么入账
  • 摊销租赁费属于什么费用
  • UserScripts Safari 苹果iOS上特别好用且免费的脚本插件,五分钟学会
  • 房产开发企业涉及税种
  • 增值税按简易计价方式
  • 固定资产后续支出资本化和费用化
  • 已经开票但是未达到收入确认条件的怎么进行账务处理
  • 转让股权后公司资产
  • 商品销售成本怎样计算
  • 堪察加半岛上的汉族人
  • 农产品抵扣进项税额的规定
  • vue清空页面数据
  • php判断语句
  • 单项履约成本是什么意思
  • 土建工程怎么入账
  • 社会团体不属于财政拨款的对象
  • 民间非营利组织包括哪些单位
  • 微信交电费怎么交
  • 没有数字的公章有效吗
  • 城建税和教育费附加地方教育费附加税率
  • 银行承兑汇票套利案例
  • 服务费发票的税率
  • 生产成本与管理企业经营实战感想
  • 我国消费现状分析
  • 车间杂工工资如何结算
  • 根据银行流水如何计算成本
  • 交车辆购置税需要什么材料
  • 单位的收入是刷卡怎么做账?
  • 物流运输车类型
  • 确定固定资产的标准
  • 税票名称开错了有影响么
  • 企业租赁厂区的管理制度
  • mysql判断字符长度
  • 比较常见的成语有哪些
  • 苹果电脑mac设备怎么删除
  • reg.exe是什么东西?
  • windows7壁纸怎么恢复
  • win7怎么设置禁止安装软件
  • win10系统应用和浏览器控制出现感叹号
  • jquery示例
  • opengl光线跟踪代码
  • js设置窗口大小
  • 如何修改apache端口号
  • unity intercom
  • Node.js中的核心模块包括哪些内容?
  • jQuery webuploader分片上传大文件
  • JavaScript Try...Catch 声明的 使用方法
  • 小规模纳税人可以开13%的发票吗
  • 四川省地方税务局公告2018年第1号
  • 深圳税务局官方客服电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设