JavaScript滚动轮播图制作原理详解

JavaScript滚动轮播图制作原理详解

本文实例为大家分享了JavaScript滚动轮播图制作原理,供大家参考,具体内容如下

滚动轮播图

滚动轮播图布局关键:是所有图片并排在一起,所以unit的宽要足够宽。
克隆第一张图片追加到最后一张
右按钮拉动策略:先拉动,再瞬移
左按钮拉动策略:先瞬移,再拉动
与呼吸轮播图一样,需要做防流氓策略

将我代码中的图片更换为你的图片,注意图片路径,还需要引入js库,我引入的是jquery-1.12.3.min.js的版本,引入的时候注意路径

举例:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         * {             margin: 0;             padding: 0;         }         ul, ol {             list-style: none;         }         a {             text-decoration: none;         }         .carousel {             width: 560px;             height: 300px;             margin: 50px auto;             border: 5px solid red;             position: relative;             overflow: hidden;         }         /* 滚动轮播图布局关键,是所有图片并排在一起             unit的宽要足够宽          */          .carousel .unit {              position: absolute;              width: 9999px;              left: 0;              top: 0;          }          .carousel .unit li {              float: left;              width: 560px;              height: 300px;          }          .btns a {              position: absolute;              width: 30px;              height: 60px;              top: 50%;              margin-top: -30px;              background-color: rgba(0, 0, 0, .5);              color: #fff;              font-size: 20px;              line-height: 60px;              text-align: center;          }          .btns a:first-child {              left: 10px;          }          .btns a:last-child {              right: 10px;          }          .circles {              position: absolute;              width: 140px;              height: 20px;              left: 50%;              margin-left: -70px;              bottom: 30px;          }          .circles ol {              width: 150px;          }          .circles ol li {              float: left;              width: 20px;              height: 20px;              margin-right: 10px;              background-color: orange;              border-radius: 50%;          }          .circles ol li.cur {              background-color: yellow;          }     </style> </head> <body>     <div class="carousel" id="carousel">         <ul class="unit" id="unit">             <li><img src="images/0.webp" alt=""></li>             <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>         </ul>         <div class="btns">             <a href="javascript:void(0)" id="leftBtn">&lt;</a>             <a href="javascript:void(0)" id="rightBtn">&gt;</a>         </div>         <div class="circles" id="circles">             <ol>                 <li class="cur"></li>                 <li></li>                 <li></li>                 <li></li>                 <li></li>             </ol>         </div>     </div>     <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>     <script type="text/javascript">     // 获取元素     var $unit = $("#unit");     var $leftBtn = $("#leftBtn");     var $rightBtn = $("#rightBtn");     var $circles = $("#circles ol li");     var length = $circles.length;     // console.log(length);     // 定义信号量 有效范围: 0, 1, 2, 3, 4     var idx = 0;     // 克隆第一张图片追加到最后一张     $unit.children("li:first").clone().appendTo($unit);     // 右按钮的点击事件     $rightBtn.click(function() {         // 防流氓         if ($unit.is(":animated")) {             return;         }         // 拉动策略: 先拉动, 再瞬移         idx++;         console.log(idx);         // 信号量 有效值是: 0, 1, 2, 3, 4, 5(5是猫腻图)         $unit.animate({"left": -560 * idx}, 1000, function() {             // 当猫腻图完全显示之后验证信号量             if (idx > length - 1) {                 // idx 归零                 idx = 0;                 // 瞬间移动到真图                 $unit.css("left", 0);             }         })         // 小圆点在1000ms之内,对应的是idx = 5 是猫腻图         // 0 - 4 是有效值, 5对应的是猫腻图         // 定义一个变量用于中转信号量         var i = idx <= 4 ? idx : 0;         $circles.eq(i).addClass("cur").siblings().removeClass("cur");     })     // 左按钮点击事件     $leftBtn.click(function() {         // 防流氓         if ($unit.is(":animated")) {             return;         }         // 左按钮的拉动策略: 先瞬移, 再拉动         idx--;         // 边界判断         if (idx < 0) {             idx = length - 1;             // 瞬间移动到猫腻图             $unit.css("left", -560 * length);         }         console.log(idx);         // 拉动         $unit.animate({"left": -560 * idx}, 1000);         // 当前小圆点加cur         $circles.eq(idx).addClass("cur").siblings().removeClass("cur");     })     // 小圆点事件     $circles.mouseenter(function() {         // 改变信号量         idx = $(this).index();         console.log(idx);         // 拉动         $unit.stop(true).animate({"left": -560 * idx}, 600);         // 小圆点加cur         $(this).addClass("cur").siblings().removeClass("cur");     })     </script> </body> </html>

推荐阅读