jquery实现无缝轮播图

jquery实现无缝轮播图

本文实例为大家分享了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代码片段

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="../css/icon/iconfont.css" >     <link rel="stylesheet" href="../css/carousel.css" >     <script src="../jquery-3.4.1.min.js"></script> </head> <body>     <div class="box">         <ul>             <li><img src="../images/1.webp" alt=""></li>             <li><img src="../images/2.webp" alt=""></li>             <li><img src="../images/3.webp" alt=""></li>             <li><img src="../images/4.webp" alt=""></li>             <li><img src="../images/5.webp" alt=""></li>             <li><img src="../images/6.webp" alt=""></li>         </ul>         <button class="iconfont left">&#xe60d;</button>         <button class="iconfont right">&#xe658;</button>         <ol>         </ol>     </div>     <script>         const box = $(".box");         const ul = $(box).children("ul");         const img_li = $(ul).children("li");         const len = $(img_li).length,             width = $(box).width();//获取box也就是li的宽         var flag = false;        //定义一个标识,来进行判断当次动画是否已经完成         var index = 0, lastIndex = 0;    //定义全局的index,与lastIndex,也就是一个起到下标的标识         $(img_li).first().clone(true).appendTo($(ul))//克隆第一张图片放在ul的最后         //生成所有的ol>li即小圆点         for (let i = 0; i < len; i++) {             $("<li>").addClass(i === 0 ? "ac" : "").appendTo($("ol")); //三元运算符给addClass进行填值             //给第一个小圆点进行默认样式的设置         }         //小圆点点击切换图片         $("ol li").on('click', function () {             if (flag) return;        //标识动画,动画未完成时,取消掉点击事件             flag = true;            //动画完成是执行点击事件的代码             lastIndex = index;        //记录上次的点击的index的值             index = $(this).index();        //将小圆点的小标赋值给index             $("ol li").eq(lastIndex).removeClass("ac")             $(this).addClass("ac");        //将样式进行toggle             $(ul).animate({ left: -index * width }, 1000, function () //jquery的自定义动画方法                 flag = false;//回调函数将在动画结束之后将标识变为true,以便于执行下一次点击事件             })         })         //点击下一张进行切换         $(".right").on('click', function () {             if (flag) return;                     flag = true;                     lastIndex = index;                     index++;        //将index进行++,使其向下一张轮播             if (index === len) {        //当轮播到最后一张clone的图片时                 index = 0;                //将index赋值为0,让小圆点正常执行                 $(ul).animate({ left: -len * width }, 1000, function () {//让动画继续执行到clone的那张图片                     flag = false;                             $(ul).css("left", 0)    //当执行到最后一张clone的图片,执行完成时,立马瞬移到第一张图片                 })             }             else {                 $(ul).animate({ left: -index * width }, 1000, function () {                     flag = false                 })             }             $("ol li").eq(lastIndex).removeClass("ac")    //给相应的小圆点进行样式设置             $("ol li").eq(index).addClass("ac")         })         //点击上一张进行切换         //与点击下一张进行切换思想一致         $(".left").on('click', function () {             if (flag) return;             flag = true;             lastIndex = index;             index--;             if (index < 0) {                 index = len - 1;                 $(ul).css("left", -len * width)                 $(ul).animate({ left: -index * width }, 1000, function () {                     flag = false;                 })             }             else {                 $(ul).animate({ left: -index * width }, 1000, function () {                     flag = false                 })             }             $("ol li").eq(lastIndex).removeClass("ac")                     $("ol li").eq(index).addClass("ac")         })         //自动播放         $(box[0]).hover(() => {             clearInterval($(box)[0].timer)         }, (function auto() {             $(box)[0].timer = setInterval(() => { //立即执行函数,在最后返回出auto函数,让hover的leave有事件执行                 $(".right").trigger('click');             }, 2000);             return auto;         }         )())        </script> </body> </html>

推荐阅读