位置: 编程技术 - 正文

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

  • 有经营许可无道路运输证罚多少钱
  • 计提坏账部分收入怎么算
  • 实收资本印花税怎么申报税目
  • 过路费定额发票还能入账吗
  • 发票盖了财务专用章旁边再盖发票章
  • 预付账款需要纳税申报吗
  • 0税率发票有什么用
  • 水利建设专项收入的税率是多少?
  • 房产税存在往期滞纳金吗
  • 销货清单是否需盖章
  • 企业破产时下列受偿等级最高的是
  • 企业所得税工资薪金支出怎么填
  • 无形资产特许权使用费怎么做账
  • 房产税细节
  • 河道工程维护管理费征收
  • 建筑行业跨期收入汇算清缴如何调整?
  • 金蝶财务软件如何打印凭证
  • 现金折扣应不应计入成本
  • 月收入不超10万减免 具体分销售额吗
  • 应付账款无法支付所得税处理
  • 事业单位转账支票管理
  • 使用专项资金购买的固定资产 需要取得发票吗
  • 子公司借款给母公司要交税吗
  • 工程收入怎么算
  • bios如何解除电脑密码
  • mac上安装homebrew
  • 笔记本怎么按出键盘
  • 逆流交易合并报表调整少数损益
  • 无u刷bios一直闪
  • win10更新kb5005033
  • linux文件权限控制
  • mac的xcode使用教程
  • icon files
  • 增值税减免税的征管规定有哪些
  • jetson b01 a02
  • 黄金旧料卖出收据怎么写
  • 未担保余值是谁承担
  • 新成立公司建账
  • 出口货物不退税进项可以开具普通发票吗
  • 企业在搬迁期间发生的搬迁收入和搬迁支出
  • web实训报告怎么写
  • laravel日志管理系统
  • 开红字发票导入信息不完整怎么处理?
  • 应纳税所得额调整金额怎么算
  • 个体发票税率开错了怎么办
  • 客户赔偿款放在哪里
  • 销货退回未开红字发票
  • SQL Report Builder 报表里面的常见问题分析
  • 民办学校建筑要求
  • 工资薪金税务缴纳
  • 公司注销实收资本有余额怎么处理
  • 差旅费抵扣增值税税率
  • 一般纳税人适用什么会计准则
  • 汇算清缴退税怎么回事
  • 应收账款无法收回说明模板
  • 金税盘是怎样的
  • 跨月发票作废怎么做会计分录
  • mysql 查询范围
  • 更新最新版win11,任务栏不见了
  • mac快速关闭所有窗口
  • linux以root用户登录
  • .cda是什么文件
  • win8系统无法开机如何备份数据
  • virtualbox虚拟机
  • rundll32找不到文件
  • 苹果Mac系统怎么恢复出厂系统
  • win7系统怎么设置不休眠
  • linuxnamespace入门
  • linux防火墙放行
  • win8引导文件
  • 超人飞车助手下载安装
  • 富文本编辑器模板
  • python下读取公私钥做加解密实例详解
  • python编写飞机大战
  • android开发范例实战宝典
  • javascript面向对象编程指南第三版
  • js正则regexp
  • 陕西税务电子税务局官网安装
  • 微信密码忘记了,手机号也没有用了,怎么办
  • 临时工和季节工需要交社保吗合法吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设