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

  • 向税务局申请发票增量增额怎么写
  • 企业的税务风险研究怎么写
  • 工业厂房房产税税率
  • 实收资本属于限定性净资产吗
  • 零申报是不是什么都不用填
  • 附加税期末余额在贷方怎么处理
  • 利息收入需要交印花税吗
  • 企业可以采用多品牌战略吗
  • 贷款逾期的本金怎么计算
  • 可以采用三栏式的明细账的有
  • 怎么核算关联企业的借款费用?
  • 行政单位资产核算
  • 其他货币资金存出投资款什么时候用
  • 第三方代缴社保算工龄吗
  • 旅游业差额开票的票据可以累计一季度吗
  • 一般纳税人抵扣小规模期间的专票怎么解决
  • 暂估出库是什么意思
  • 股东拿不到钱
  • 社保滞纳金能否超过本金
  • 长期应付款账面价值和账面余额
  • 分红转增股本什么意思
  • 购货方收到代垫运费的发票怎么做会计分录?
  • 产值等于营业额吗
  • 个人劳务费增值税税率是多少2023
  • 移动通信定额发票
  • 1697510605
  • 特种设备年检费怎么开具发票
  • 税法中的视同行为如何开具发票
  • 核定征收要交企业所得税吗
  • 若依官网
  • 交易性金融资产属于什么科目
  • 企业所得税的应纳税额计算公式
  • 移民美国怎样加入医疗保险
  • vue如何销毁页面
  • 零星采购无票怎么办
  • 语言翻译算法
  • 直接费用的定义
  • 被称为下一代风华的是
  • 我初次尝试制作的英文怎么写
  • 火遍全网的超燃神曲旋律震撼人心,听完热血沸腾!
  • php如何入门
  • 增值税发票认证期限是多久
  • 增值税专用发票丢了怎么补救
  • 事业结余期末余额在借方
  • 事业单位财政拨款收入会计分录
  • ps中如何使用切片工具
  • 限售股 缴税
  • mysql5.7压缩包安装配置教程
  • 有材料成本差异率怎么算材料成本差异
  • 应交税费属什么类科目
  • 固定资产内部转移流程
  • 房地产公司预收房款什么时候确认收入
  • 营业收入包括哪几项收入
  • 确定收入 记账凭证摘要怎么写
  • 函证核对法是什么
  • 删除sql server2008
  • Win10 Build 10565版Edge浏览器完整更新日志一览
  • tcpsyncookies
  • fedora打不开
  • unix怎么切换用户
  • solaris netstat
  • win7系统有wifi功能吗
  • iphone制造成本
  • centos6 grub
  • windows 10 build 9834
  • linux更新内核的好处
  • imecmnt.exe
  • 如何延长mac待机时间
  • win8搜索不到自己家的WiFi
  • 按住鼠标右键拖动文件
  • android中的active_result
  • bat弹窗
  • 转义字符对应英文
  • ubuntu on android
  • unity 断点
  • js获取当前点击事件的节点
  • python类属性和类方法
  • 三角进攻怎么打
  • 安卓开源项目叫什么
  • android 自定义actionbar
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设