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

  • 以房抵债的房子交房产税吗
  • 房地产企业怎么认定
  • 处置无形资产属于经营活动吗
  • 出口货物关税完税价格
  • 清包工可以有一部分小料吗
  • 免征企业所得税的有
  • 刚成立的公司好不好
  • 企业出租房屋增值税发票怎么开
  • 地税补缴社保
  • 赔偿费计入费用减应收账款怎么做账
  • 模具发票如何入账
  • 小规模纳税人企业所得税怎么申报
  • 发出商品是用进货吗
  • 异地开发房地产会一直待在那个城市吗
  • 资产评估增值的会计科目
  • 国有资产划转如何做账
  • 免费的企业
  • 赠送电影票的说辞
  • 转让合同债权
  • 不涉及税收
  • 公司发票限额按什么计算
  • 计提工资多计提,如何做冲销
  • 海关专用缴款书怎么认证?
  • 增值税一般项目是指什么
  • 土地溢价的成本包括
  • 收到工程发票如何做账
  • 税务局返还的个税手续费需要缴纳增值税吗
  • Windows10如何修复引导
  • 工伤保险公司缴纳部分为何是0
  • 事业单位在建工程转固定资产的账务处理
  • 小规模固定资产会计科目
  • cpu天梯图2022最新版1240p
  • 代购机票骗局
  • 营业外支出包括哪些科目
  • php扩展ffmpeg教程
  • go dll
  • gst插件
  • 结算劳务外包的工作内容
  • 营业税改增值税的过程
  • php封装app
  • php模板教程
  • 蓝桥杯web开发 618
  • 动静结合会计等式的不会重复算利润吗
  • 图像处理入门
  • vue3版本网页小游戏
  • vuerouter模块化
  • 美国大学数学系排名
  • 小企业的流动资产
  • 企业的应交税金一般通过什么科目核算
  • 土地增值税的相关问题
  • mysql日志文件在哪里
  • 长期待摊的装修费什么时候入账
  • 政府会计应付职工薪酬明细科目
  • 个人所得税申报数
  • 纯加工企业账务处理
  • 冲销坏账怎么做分录
  • 长期预付账款涉税
  • 委托加工如何做会计处理
  • 代发工资的手续流程
  • mysql中索引有什么用
  • mysql常用关键字及其用法
  • 创建windows
  • tcp半连接和全连接
  • jusearch是什么程序
  • Slackware Linux init 进程
  • linux source命令是什么
  • egret引擎基础入门
  • css选择器教程
  • &&在js中
  • linux中的tree
  • Python中str is not callable问题详解及解决办法
  • 性能优化是什么
  • javascript tr
  • js 输入
  • 陕西省国家税务总局班子成员
  • 国家税务总局关于进一步优化营改增纳税服务工作的通知
  • 乌市沙区医保局电话是多少
  • 广西电票科技有限公司
  • 北京市东城分局刑侦大队电话
  • 关于切实加强建筑施工领域安全防范工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设