位置: 编程技术 - 正文

jQuery代码实现图片墙自动+手动淡入淡出切换效果(jquery 画图)

编辑:rootadmin

推荐整理分享jQuery代码实现图片墙自动+手动淡入淡出切换效果(jquery 画图),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:如何用jquery,jquery的实现原理,jquery写html代码,jquery实战,jquery实战,jquery图片,jquery图片,jquery代码实例,内容如对您有帮助,希望把文章链接给更多的朋友!

相关阅读:

Jquery代码实现图片轮播效果(一)

在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果,非常漂亮,实用性也非常高。今天小编抽个时间给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果,一起学习吧!

先给大家展示效果图,如果大家觉得还不错,请参考具体实现代码。

添加一个div(class=container),设置宽度和高度,这里设置了宽px,高px。添加居中的定位。在div里面添加一个ul(class="img")列表用来盛放图片,设置ul里面的li标签position为absolute,这时图片会重合在一起,同时设置display为none。图片设置宽度和高度与container相同。在container里面再添加一个ul列表用来盛放下面的一排数字,然后进行相应的定位和设置。添加两个div:left和right,分别是左右两个按钮,进行相应的定位和设置,里面的箭头分别是大于号和小于号。

实现思路及原理介绍:

当鼠标移动到对应的数字上面的时候,用$(this).index()获得数字所在容器里面的序号,然后将序号传递到eq()函数里面获得 li 标签,然后添加函数fadeIn();这样隐藏的图片就显示出来了,同时调用sibling().fadeOut(),让同级的兄弟节点隐藏起来,这样之前显示的图片就隐藏了起来。

jQuery代码实现图片墙自动+手动淡入淡出切换效果(jquery 画图)

添加setInterval()函数,让图片每隔相同的时间变换一次。

我觉得一个主要的问题就是自动切换和手动切换的冲突,当鼠标移动到图片上面的时候应该停止自动切换,在这里用的方法是:

给container添加hover函数,当鼠标移动到container里面的时候用clearInterval()函数去掉时间间隔函数,这样当鼠标移动到图片上面的时候,图片就不会切换了,当鼠标移出的时候添加setInterval()函数。这样图片就能继续切换了。

注意:i 和 t 需要设置成全局变量,这样不同的函数才能共用。i 表示当前显示图片的索引。t 是setInterval的ID。当鼠标移出的时候不用再var一个t了,只需:t=setInterval(time_fun,);即可。

eq(n):找到第n个元素

eg:$('li').eq(2).css('background-color', 'red');//设置第二个li标签的背景颜色为红色

index():找到该元素的索引值

有兴趣的研究一下代码:

以上是小编给大家带来的jQuery代码实现图片墙自动+手动淡入淡出切换效果,希望对大家有所帮助,同时也非常感谢大家对积木网网站的支持!

CKEditor无法验证的解决方案(js验证+jQuery Validate验证) 最近项目的前端使用了jQuery,表单的前端验证用的是jQueryValidate,用起来很简单方便,一直都很满意的。前段时间,根据需求为表单中的textarea类型的元

jQuery实现三级菜单的代码 上周新接手一个网站建设的活儿,其中有需要要jquery代码实现三级菜单的需求,其实说难也不难,下面小编把代码分享给大家,供大家参考。先给大家

基于Jquery插件Uploadify实现实时显示进度条上传图片 先了解了解Uploadify,具体内容如下Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性。Uploadify特性

标签: jquery 画图

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

上一篇:jQuery绑定事件的几种实现方式(jq绑定事件的方法有哪些)

下一篇:jQuery实现三级菜单的代码(html5三级菜单)

  • 个人转让著作权免税吗
  • 一般纳税人可以开1%的发票吗
  • 预计净残值的计算公式为
  • 一般纳税人简易计税可以抵扣进项税额吗
  • 固定资产清理属于流动资产吗
  • 出售投资性房地产时,按其账面价值结转到主营业务成本
  • 进账多于销项怎样报税
  • 商贸企业加工费包括哪些
  • 企业收购资金计算公式
  • 境外机构在境内发行的人民币债券
  • 逾期缴纳车辆购置税后情况说明怎么写
  • 变更注册资本的股东会决议范本
  • 技术转让费为什么那么贵
  • 计提企业年度所得税
  • 营改增后购置设备进项税抵扣怎么做?
  • 商业保险可以税前扣除多少
  • 通行费发票如何开具
  • 重置申报清册是什么意思
  • 土地增值税计算表
  • 非营业活动交增值税吗
  • 房产税计税税率怎么算
  • 公司收到纸质承兑不开票行吗
  • 广告公司固定资产有哪些?
  • 企业稀释股份
  • 小规模企业税务简易注销
  • 停工停产费用
  • 为什么iphone手机闹钟定了不响
  • gsicon.exe是什么进程 作用是什么 gsicon进程查询
  • 新win10浏览器
  • Win11 Build10.0.22000.51预览版正式推送 (附完整更新日志)
  • php保存数据
  • 存货包括哪些会计账户
  • 公司清算债权债务如何清理
  • 收到小微企业贷款减息会计处理办法
  • 现金日记账采用三栏式
  • 手把手教你win7换主板不重装系统的方法
  • yolov3 pytorch详解
  • mysql分区语句
  • 小规模纳税人无进项票怎么办
  • 营业外支出明细账
  • ps中如何使用切片工具
  • python如何建立函数
  • 如何确定固定资产的原始成本
  • 送货单收据怎么写
  • 转让不动产与销售不符
  • ibm db2认证
  • 一般纳税人工程劳务发票税率是多少
  • 住宿费发票可以报销吗
  • 如何将港币兑换成人民币
  • 去年未分配利润 负数 结转今年
  • 车辆购置税的会计科目怎么写
  • 申请开立基本存款账户时,银行应按照
  • 确定收入 记账凭证摘要怎么写
  • 公司水电费如何做账
  • 特许权使用费代扣代缴企业所得税
  • 年终奖通常怎么计算
  • 实用的银行转账怎么转
  • 检查sql脚本语法
  • xp系统百度
  • Ubuntu配置永久IP配置文件
  • mac的vmware
  • linux 更改目录名
  • 三步搞定的贵公子发型教程
  • Windows Server 2012服务器管理器的详细介绍
  • win10蓝屏故障
  • win 10 build
  • android入门教程
  • cocos2dx quicxk 3.3 导入Json文件布局 UI
  • opengl教程48讲
  • js分段上传
  • unity怎么导入材质包
  • JavaScript中的math.pi
  • node.js中http模块和url模块的简单介绍
  • javascript运用
  • jsonobject.parseobject异常
  • 空调设备税率多少钱
  • 浙江省网上税务服务大厅
  • 房产的原值以什么为准
  • 阜阳烟草证办理条件
  • 国家税务总局黑龙江电子税务局下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设