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

  • 三星i929是什么型号(三星i929 rom)(三星i9250是什么型号)

    三星i929是什么型号(三星i929 rom)(三星i9250是什么型号)

  • 英特尔第 14 代 Meteor Lake-P 移动 CPU评测(英特尔第一代14纳米)

    英特尔第 14 代 Meteor Lake-P 移动 CPU评测(英特尔第一代14纳米)

  • 京东运费券可以赠送吗(京东运费券可以和全品类券一起使用吗)

    京东运费券可以赠送吗(京东运费券可以和全品类券一起使用吗)

  • 端口对运输层的作用(运输层端口长度)

    端口对运输层的作用(运输层端口长度)

  • 宽带能连上但是上不了网怎么回事(宽带能连上但是没信号)

    宽带能连上但是上不了网怎么回事(宽带能连上但是没信号)

  • 电话打通了对方无响应(电话打通了对方不说话)

    电话打通了对方无响应(电话打通了对方不说话)

  • 什么是id机(什么是iphone id机)

    什么是id机(什么是iphone id机)

  • hd开着有什么影响(hd开了有什么坏处)

    hd开着有什么影响(hd开了有什么坏处)

  • 手机电池的电压是几伏(智能手机电池的电压)

    手机电池的电压是几伏(智能手机电池的电压)

  • 笔记本windows无法启动怎么办(笔记本windows无法与设备或资源(DNS服务器)没有响应)

    笔记本windows无法启动怎么办(笔记本windows无法与设备或资源(DNS服务器)没有响应)

  • 一个电话号码可以注册几个抖音号

    一个电话号码可以注册几个抖音号

  • 个人可以申请抖音蓝V吗(个人可以申请抖店吗)

    个人可以申请抖音蓝V吗(个人可以申请抖店吗)

  • 帧数不稳定是什么原因(帧数不高是什么原因)

    帧数不稳定是什么原因(帧数不高是什么原因)

  • word文档筛选在哪里(word文档 筛选)

    word文档筛选在哪里(word文档 筛选)

  • 计算机中 媒介是指什么(计算机为媒介的通信)

    计算机中 媒介是指什么(计算机为媒介的通信)

  • 剪映怎么手动添加滚动字幕(剪映怎么手动添加同步字幕)

    剪映怎么手动添加滚动字幕(剪映怎么手动添加同步字幕)

  • 智伴机器人有什么缺点(智伴机器人有什么用处)

    智伴机器人有什么缺点(智伴机器人有什么用处)

  • 华为mate30怎么贴膜(mate30pro贴)

    华为mate30怎么贴膜(mate30pro贴)

  • 红色cmyk色值为多少(各种红色的色值cmyk)

    红色cmyk色值为多少(各种红色的色值cmyk)

  • iqoo背光灯在哪里设置(iqoo1背面灯怎么设置)

    iqoo背光灯在哪里设置(iqoo1背面灯怎么设置)

  • app英文变中文的方法如下(app英文变中文的软件下载)

    app英文变中文的方法如下(app英文变中文的软件下载)

  • 手机cpu性能天梯图2022年6月最新版(手机cpu性能天梯图排行榜)

    手机cpu性能天梯图2022年6月最新版(手机cpu性能天梯图排行榜)

  • 〖大前端 - 基础入门三大核心之JS篇⑰〗- JavaScript的流程控制语句「while循环语句」(大前端需要掌握什么技能)

    〖大前端 - 基础入门三大核心之JS篇⑰〗- JavaScript的流程控制语句「while循环语句」(大前端需要掌握什么技能)

  • 企业租车能抵增值税吗
  • 2023年享受六税两费减免吗
  • 受票方与付款方不一致
  • 非税收入票据能否税前扣除
  • 增值税现代服务业6大行业
  • 公司期权激励如何兑现
  • 工程 开办费
  • 水利建设专项收入的税率是多少?
  • 遗失的支票怎样避免经济损失
  • 土地增值税预缴最新税法规定
  • 装修费能否一次性支付
  • 预计退货会计英语
  • 招投标增值税
  • 企业所得所得税税负
  • 一般纳税人哪些项目可以简易征收
  • 关于保安员服务内容主要包括
  • 企业所得税的纳税人和负税人一致吗
  • 什么情况下要办居住证
  • 必要收益率的计算题目
  • 无法偿还的借款怎么处理
  • 出口货物国际运输流程图
  • 已认证的进项税额转出怎么做账务处理
  • led电子屏税收编码
  • 公司借银行款会计分录
  • linux如何安装
  • php更新数据库
  • 所得税如何做帐
  • 芦荟的功效与作用治什么病
  • win10任务栏隐藏正在运行的程序
  • 年终奖发放问题
  • loaddriver.exe是什么病毒
  • linux多网卡聚合
  • uniapp打开系统设置
  • 房地产企业增值税扣除土地成本
  • 增值税达不到起征点账务处理
  • mac快捷切换
  • Yii2 assets清除缓存的方法
  • unet模型代码matlab
  • ChatGPT的火爆出圈,你对它有几分了解?
  • discuz 移动端
  • 事业单位结余资金管理办法
  • 固定资产增值税税率是多少
  • 出口关税的计算公式
  • 固定资产减少当月计提吗
  • 甲供材的卸料由谁负责
  • 企业应付职工薪酬的会计核算毕业设计
  • 社保局退的工伤保险怎么记账
  • 什么情况没有排卵期
  • 财付通支付的优缺点
  • 工会经费的开支必须取得发票么
  • 研发支出的会计处理原则
  • 无票收入怎么报增值税
  • ubuntu docker教程
  • win2003安装
  • 开机f8显示英文字母
  • 如何使用airplay2
  • mac中的快捷键大全
  • 如何将iPhone照片导入电脑
  • mac怎么设计网页
  • Win7怎么关闭自动更新
  • win10version最新版本
  • peafsearch是什么程序
  • shell在linux
  • WIN7系统的电脑怎么运行快
  • linux中安装软件可使用哪些方式
  • 摄像头挡住了
  • 学习名言警句 励志
  • myeclipse创建
  • JavaScript中的变量名不区分大小写
  • python的linux
  • python xml.etree
  • 不是批处理文件
  • android synchronized
  • python并发原理
  • java script
  • 全国税务查询
  • 电子税务局登录密码怎么查询
  • 增值税发票不够用怎么增票
  • 党建共建的目的意义
  • 建筑业甲方代扣代缴增值税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设