位置: 编程技术 - 正文

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传递参数的简单实例

  • 税务申报系统没有印花税
  • 应交税金怎么算出来的
  • 记账更改的方法
  • 公司名下的车怎么报废
  • 材料暂估入库的摘要怎么写
  • 金税四期上线后如何查虚开
  • 所得税费用期末应转入
  • 资产负债表应交税费期末余额是什么意思
  • 租赁个人汽车
  • 个人股权转让给公司
  • 土地增值税清算利息扣除规定
  • 出差旅费补助报销明细表需要发票吗?
  • 负债与递延收益的区别
  • 物业公司管理费用
  • 股东向公司借款需要股东会决议吗
  • 零工受伤老板怎么赔偿
  • 国税定额发票有效期是多长时间
  • 纳税人签字
  • 总公司给分公司钱
  • 广告费准予扣除怎么算
  • 前期物业管理公司
  • 保险公司联合举办活动
  • 酒店小规模纳税人税率
  • 公司内部银行往来款会计分录
  • 建筑企业预收的工程款会计分录
  • 住宿费进哪个科目
  • mac如何强制退出全屏
  • 企业销售应如何做
  • 公司收到项目投资款怎么做账 项目结束后需要退本金
  • 投资回报期限
  • 产品成本的计算过程也就是各种费用界限的划分过程
  • cpu性能天梯图2023年3月
  • 如何备份电脑系统到另外一个硬盘
  • 顺丰充值的钱可以退吗
  • 电脑cn是什么意思
  • 携税宝的作用
  • 固定资产和固定资金的区别
  • 公司向股东个人借款最新规定
  • 新空调的安装费是多少
  • 纽格尔官网
  • 高新技术企业取消资格的程序
  • vue控制按钮是否禁用
  • 多域名指向同一ip有问题吗
  • php隐藏跳转
  • html5+css3web前端设计基础教程
  • 现金流量的折现值
  • 餐饮行业的增值税
  • 资产减值损失属于营业外支出吗
  • python.mat
  • sql server功能选择
  • 印花税购销合同包括哪些
  • sql表添加字段
  • sql常用优化技巧
  • 企业银行基本户和一般户的区别
  • 2021个税新规工资表公式
  • 文化传媒公司的主营业务
  • 出口退税免抵退税额要交城建税吗
  • 建筑公司工程上班时间
  • 限售股锁定期延长
  • 递延收益的影响
  • 应付利息怎么记账
  • 赠送给客户的商品怎么做会计分录
  • sqlserver 查看表
  • centos 怎么用
  • win10系统打印机脱机状态怎么恢复正常打印
  • ubuntu20.04怎么用
  • win10连接ubuntu20.04远程桌面
  • 双系统重装win11
  • Linux>=2.6.39 Mempodipper本地提权分析和EXP利用(CVE-2012-0056)
  • linux cat命令的用法
  • nodejs创建vue
  • 验证用户输入的密码JavaScript代码加文字
  • bootstrap需要学多久
  • 如何旋转图片30度
  • js获取tbody
  • android设置无标题
  • 耕地占用税是土地增值税开发成本吗
  • 烟台税务app
  • 武汉二手房交易信息
  • 成品油进货
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设