位置: 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的使用)

  • 个人所得税怎么扣除标准
  • 出口货物关税完税价格
  • 电子税务局税种认定怎么操作
  • 征税和补贴对市场结果的影响
  • 分支机构是否需要进行企业所得税汇算清缴申报
  • 工会签约有什么好处
  • 企业怎么申请无运输工具承运资质
  • 专用发票报销时限
  • 外经证预交增值税和专管员
  • 企业牌照拍卖收入计入什么科目
  • 未达到起征点销售额会计分录
  • 填报企业年报
  • 跨期间收入如何确定当期收入
  • 对公账户长期不用怎么收费
  • 苹果手机14pro max
  • 职工福利费算职工薪酬吗
  • 增值税红字发票开具
  • 家里的无线网连着连着就断了
  • linux系统的
  • 商会账目
  • 发票盖章有讲究吗
  • 排灯节起源
  • 最贵的游戏宣传片
  • Laravel 5.4向IoC容器中添加自定义类的方法示例
  • 善意取得虚开增值税专用发票处理
  • 固定资产卡片账自固定资产报废后的保管期限是
  • PHP new static 和 new self详解
  • win11的截屏
  • es6解构赋值对象
  • linuxshel
  • read命令功能
  • 计提坏账准备需要确认递延所得税吗
  • dubbo 实现原理
  • 企业管理费用的分类
  • 下列支出计入销售费用账户借方的是
  • 施工企业会计科目
  • 怎么计算利润的百分比
  • 房租收入如何纳税
  • 员工福利费属于什么会计科目
  • 出口退税计入
  • 售后维修的会计分录
  • 认缴资金 实缴资金
  • 没有收到款项签认债有用吗
  • 企业外购的无形资产的成本包括
  • 一般纳税人企业所得税税率
  • 领用生产用原材料一批
  • 房产公司增值税专用发票
  • 以原材料投入资本
  • 财务会计期末总结
  • 保本理财产品如何赎回
  • 上月有留底税额时本月缴纳税款时怎么做分录
  • 去年的物业费今年收到了可以确认收入吗
  • 新会计准则待摊费用还有吗
  • 内账税费计入什么科目
  • 非营利医疗机构免征哪几种税
  • 深入分析换一种说法
  • sql server怎么改数据
  • MySQL 与 Elasticsearch 数据不对称问题解决办法
  • sqlserver 实现分组合并
  • 高端电脑品牌
  • vmware10虚拟机安装
  • linuxsleep函数
  • sxs.exe病毒
  • windows取消定时任务
  • ubuntu20.04怎么用
  • vmware下载不了
  • jQuery实现checkbox即点即改批量删除及中间遇到的坑
  • bat批处理删除文件
  • 发现可疑文件autorun.inf
  • 网页设计中的几种齐方式及其特点
  • awk 查找
  • jq 鼠标事件
  • python解决方案与程序有什么不同
  • javascriptjs
  • 安卓开源项目叫什么
  • Android Path和PathMeasure类的使用之获取圆弧上的坐标值
  • 党建共建的目的
  • 重庆国税电子税务登录
  • 发票勾选后必须抵扣吗
  • 2021年福建省灵活就业人员养老保险缴费标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设