本文实例为大家分享了jquery实现无缝轮播图的具体代码,供大家参考,具体内容如下
实现功能(无缝轮播图Jquery)
利用移动定位进行无缝滚动,大体实现点击切换图片,每张图片对应一个小圆点,并且小圆点点击可以进行切换。鼠标移入停止图片轮播
强调
jquery引入本地引入,你可以在网上导入
全局由index贯穿
动画中的回调函数
flag标识,进行判断动画在执行中还是执行结束
对于图片切换到第一张还是最后一张的处理
css代码片段
* { padding: 0; margin: 0; } html, body { height: 100%; overflow: hidden; } body{ background: rgba(0, 0, 0, 0.2); } .box { width: 1000px; height: 80%; margin: 50px auto; position: relative; overflow: hidden; box-shadow: 2px 2px 15px #333333; } ul { height: 100%; position: absolute; display: flex; } ol, ul, li { list-style: none; } li { flex-shrink: 0; width: 1000px; height: 100%; } li>img { width: 100%; height: 100%; } button { width: 70px; height:50px; color: #f5f5f5; position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.2); border-radius:0 5px 5px 0; opacity: 0; border: none; cursor: pointer; outline: none; transition: all 1s; } .box:hover button{ opacity: 1; } button:hover{ background: rgba(0, 0, 0, 0.5); } .left{ border-radius:0 5px 5px 0; } .right { border-radius:5px 0px 0px 5px; right: 0; } ol{ width: 120px; display: flex; /*进行水平布局,与float功能并无差异,此处用float也是可以的*/ justify-content: space-between; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } ol li{ border-radius: 50%; width: 10px; height: 10px; background-color: #fff; cursor: pointer; } .ac{ width: 25px; transition: width 1s; border-radius: 5px 5px 5px 5px; }
html,js代码片段
Document
相关推荐
华为云Stack首席架构师:打造“称手”的数字化工具,答好政企IT数字化转型这道必选题
小米回应“被意大利机构罚款2176万元”;Win 12要来?曝微软调整Windows迭代节奏;Vite 3.0 发布|极客头条
WSL2中使用Docker基于Centos7.9+宝塔7.9配置的开发环境
21天搞定python分布爬虫_零基础小白三周21天搞定Python分布爬虫课程全套下载
java8的stream将一个List转为按照某个字段分组的map,再按照另一个字段取max最终得到一个map
以太坊 DApp 开发-Geth 私链环境搭建-Ubuntu 平台
Angular InjectionToken APP_INITIALIZER multi 标志位不同值的情况讨论