位置: IT常识 - 正文
用jQuery实现轮播图——超简单(代码解释)(jquery制作轮播切换效果)
发布时间：2024-01-14用jQuery实现轮播图——超简单(代码解释) 
本文链接地址:https://www.jiuchutong.com/zhishi/295299.html
转载请保留说明！
推荐整理分享用jQuery实现轮播图——超简单(代码解释)(jquery制作轮播切换效果)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery的轮播效果,jquery轮播图自动播放,jq轮播图实现简单代码,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);"><</a><a href="javascript:void(0);">></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文件就可以了
上一篇：vite .env环境变量配置(vericut9.0环境变量)
下一篇：YOLOv5用TensorBoard可视化结果解读(yolov5的使用)
