位置: IT常识 - 正文

用jQuery实现轮播图——超简单(代码解释)(jquery制作轮播切换效果)

编辑:rootadmin
用jQuery实现轮播图——超简单(代码解释)

推荐整理分享用jQuery实现轮播图——超简单(代码解释)(jquery制作轮播切换效果),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery的轮播效果,jquery轮播图自动播放,jq轮播图实现简单代码,jquery轮播图自动播放,jquery轮播图自动播放,jquery实现轮播图,jquery轮播效果代码,用jquery实现轮播图,内容如对您有帮助,希望把文章链接给更多的朋友!

用jQuery实现轮播图——超简单(代码解释)(jquery制作轮播切换效果)

先看效果 鼠标悬浮时停止轮播,离开时自动轮播,点下一张小圆点会随着动

直接上代码

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.wrapper {width: 600px;height: 350px;border: 1px solid red;position: relative;}/* 5张图片叠加到一块 */.wrapper img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: none;}.wrapper img:nth-of-type(1) {display: block;}/* 小圆点 */.btn {width: 150px;display: flex;justify-content: space-around;position: absolute;left: 225px;bottom: 10px;z-index: 100}.btn span {display: block;width: 15px;height: 15px;border: 3px solid white;border-radius: 50%;}/* 左右箭头 */.wrapper a {text-decoration: none;font-size: 50px;color: red;position: absolute;top: 35%;}.wrapper a:nth-of-type(1) {left: 10px;}.wrapper a:nth-of-type(2) {right: 10px;}.active {background-color: red;}</style></head><body><div class="wrapper"><div class="contain"><img src="./imgs/1.png" alt=""><img src="./imgs/2.png" alt=""><img src="./imgs/3.png" alt=""><img src="./imgs/4.png" alt=""><img src="./imgs/5.png" alt=""></div><div class="btn"><span class="active"></span><span></span><span></span><span></span><span></span></div><a href="javascript:void(0);">&lt;</a><a href="javascript:void(0);">&gt;</a></div><script src="js/jquery-3.6.0.js"></script><script>var index=0;// 点击上一张$("a:first").click(function(){prev_pic();})// 点击下一张$("a:last").click(function(){next_pic();})// 悬浮停止$(".wrapper").mouseover(function(){clearInterval(id);});$(".wrapper").mouseout(function(){autoplay();})// 下一张function next_pic(){index++;if(index>4){index=0;}addStyle();}// 上一张function prev_pic(){index--;if(index<0){index=4;}addStyle();}// 控制图片显示隐藏,小圆点背景色function addStyle(){$("img").eq(index).fadeIn();$("img").eq(index).siblings().fadeOut();$("span").eq(index).addClass("active");$("span").eq(index).siblings().removeClass("active");}// 自动轮播var id;autoplay();function autoplay(){id=setInterval(function(){next_pic();},1000)}</script></body></html>

这里只要把图片地址更换一下 ,引用jquery文件就可以了

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

上一篇:vite .env环境变量配置(vericut9.0环境变量)

下一篇:YOLOv5用TensorBoard可视化结果解读(yolov5的使用)

  • opporeno7pro屏幕多大(opporeno7pro屏幕多少厘米)

    opporeno7pro屏幕多大(opporeno7pro屏幕多少厘米)

  • 微信专清里面的文件可以删除吗(微信专清里面的视频怎样恢复)

    微信专清里面的文件可以删除吗(微信专清里面的视频怎样恢复)

  • 淘宝上催促卖家处理在哪里(淘宝催促卖家处理退款)

    淘宝上催促卖家处理在哪里(淘宝催促卖家处理退款)

  • 华为手机wifi自动关闭怎么回事(华为手机wifi自动断开什么原因)

    华为手机wifi自动关闭怎么回事(华为手机wifi自动断开什么原因)

  • 微信怎么发送大于100m的视频(微信怎么发送大视频文件)

    微信怎么发送大于100m的视频(微信怎么发送大视频文件)

  • 锂电池短路后能恢复吗(锂电池短路后能充电吗)

    锂电池短路后能恢复吗(锂电池短路后能充电吗)

  • 华为hg8240是千兆吗(华为hg8245c是千兆吗)

    华为hg8240是千兆吗(华为hg8245c是千兆吗)

  • 微信读书属于阅文集团吗(微信读书是谁开发的)

    微信读书属于阅文集团吗(微信读书是谁开发的)

  • 爱奇艺扫码登录怎么没了(爱奇艺扫码登录怎么登录不了)

    爱奇艺扫码登录怎么没了(爱奇艺扫码登录怎么登录不了)

  • 打电话没有提示音就挂了(为什么手机关机了打电话没有提示)

    打电话没有提示音就挂了(为什么手机关机了打电话没有提示)

  • 钉钉屏幕共享视频没有声音怎么办(钉钉屏幕共享视频有声音吗)

    钉钉屏幕共享视频没有声音怎么办(钉钉屏幕共享视频有声音吗)

  • 手机没停机4g连不上网(手机没停机但是连不上数据怎么了)

    手机没停机4g连不上网(手机没停机但是连不上数据怎么了)

  • airpods适用于6s吗(airpodsiphone6可以用吗)

    airpods适用于6s吗(airpodsiphone6可以用吗)

  • qq的精准查找什么意思(qq什么叫精准查找)

    qq的精准查找什么意思(qq什么叫精准查找)

  • gtx1050是什么显卡

    gtx1050是什么显卡

  • 软件主要由什么组成(软件主要是指什么)

    软件主要由什么组成(软件主要是指什么)

  • 手机号挂失了微信还能用吗(手机号挂失了微信的钱还能用吗)

    手机号挂失了微信还能用吗(手机号挂失了微信的钱还能用吗)

  • oppoa5微信能刷脸支付么(oppo手机微信有刷脸支付功能吗)

    oppoa5微信能刷脸支付么(oppo手机微信有刷脸支付功能吗)

  • wps没保存的文档怎么找回(怎么找wps没保存的文档)

    wps没保存的文档怎么找回(怎么找wps没保存的文档)

  • 无感认证啥意思(什么是无感认证)

    无感认证啥意思(什么是无感认证)

  • iphonexr前置取消反向怎么设置(苹果xr前置取消反向怎么设置)

    iphonexr前置取消反向怎么设置(苹果xr前置取消反向怎么设置)

  • 手机怎样复制链接(手机怎样复制链接到金山文档)

    手机怎样复制链接(手机怎样复制链接到金山文档)

  • hd在哪里打开(oppo手机的hd在哪里打开)

    hd在哪里打开(oppo手机的hd在哪里打开)

  • 深度学习知识点简单概述【更新中】

    深度学习知识点简单概述【更新中】

  • python如何转移数据库里的数据(python转换数字)

    python如何转移数据库里的数据(python转换数字)

  • 税前扣除项目主要内容?
  • 销售购物取得的收入
  • 四川网上电子税务局
  • 简易计税的进项可以抵扣吗
  • 汇算清缴退款怎么入账
  • 咨询公司所得税税负率是多少合适
  • 增值税主表本期缴纳上期应纳税额需要填数嘛
  • 增值税零申报附加税怎么报
  • 互联网公司如何盈利
  • 投资性房地产账面价值大于公允价值计入什么
  • 利税总额是应交还是已交
  • 工资费用分配表属于什么凭证
  • 资产报废变现收入应开具哪种发票
  • 职工伤残补助金被单位扣留违反什么法
  • 产品检验费怎样做账?
  • 别人送我免费赠品
  • 购入办公楼的入账价值
  • 合伙企业的投资者李某以企业资金
  • 公司厂房在建但已收到房租是否要交房产税呢?
  • 补计提以前年度增值税
  • 税局未核定印花税一直没有交怎么办
  • 案例讲解:将自己的房产用于办公使用,在税收的缴纳中该如何把控?
  • 境外所得税收抵免政策
  • 固定资产可以一次计入费用吗
  • 一般纳税人销售自己使用过的物品
  • 小企业会计准则会计科目表
  • 推广费什么公司能开
  • 银行对公账户网上注销流程需要多久
  • 货币资金核算流程设计
  • 公司房产税如何征收税率
  • 双系统跳过磁盘检测
  • 如何更改中英文切换
  • 计提折旧是什么账户
  • 个体户经营所得核定税率
  • 冷车启动缺缸热车正常已解决
  • 2022年苹果iphone14一个几个颜色
  • 外购货物应抵扣的进项税额
  • php获取地理位置
  • json解析格式
  • electron-vue官网
  • 小微企业资金数额
  • php打不开网页
  • 小规模纳税人征收方式
  • 租赁的房屋再转租出去交几次印花税呢
  • 单位为职工订做活动通知
  • sobel算子 opencv
  • 外埠施工企业
  • 帝国cms8.0版
  • 权责发生制和收付实现制例题
  • 个税手续费返还要交企业所得税吗
  • db2 describe
  • 自产产品对外捐赠要确认收入吗
  • 股东权益合计等于净资产吗
  • 购买加油卡走哪个平台好
  • 小规模购进商品怎么做账
  • 财务分析与财务管理的共同点
  • 长期待摊费用属于利润表项目吗
  • 日用品增值税率是多少
  • 工会经费计提比例0.8%
  • 不能抵扣的会计分录
  • 免抵税额和免抵退税额一样吗
  • 会计主体包括哪些四种
  • access数据库导入到sqlserver
  • 如何恢复数据库删除的文件
  • win8设置在哪
  • win7如何设置屏幕不黑屏
  • 在linux系统中查看文件的内容命令
  • WIN7系统如何恢复出厂系统
  • linux在u盘中运行
  • unity best fit
  • css开发环境
  • vue基于什么
  • python爆破脚本
  • node.js mac
  • unity协程的工作原理
  • js实现组件功能
  • 陕西省税务系统
  • 陕西省国家税务总局班子成员
  • 工会经费按年还是季度申报
  • 车辆购置税退税申请表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设