需求文档

轮播图（焦点图）需求

    1. 做一个轮播图功能，能够循环自动轮播，当播到最后一张图片时，再播就要播第一张图片
    1. 鼠标放到轮播图窗口上，要停止自动轮播，并且左右两个小箭头要出来。点击两个小箭头可以手动切换，点击左侧的小箭头，切换上一张，点击右侧的小箭头，切换至下一张；当鼠标画出时，轮播图还要恢复自动轮播
    1. 轮播的时候下面的小点要跟着动，上面显示的第几张图片，下面第几个小点要选中
    1. 点击的这些小点，上面的图片也会跟着切换到对应的图片

轮播图的原理（左右轮播）

  1. 在外层有一个 container 的盒子，宽高只能显示一张图片，并且设置 overflow：hidden；// 溢出隐藏

  2. 在 container 下面有一个叫做 wrapper 的盒子，wrapper 相对于 container 绝对定位，wrapper 里有很多图片，这些图片尺寸都是相同的，并且在一行排列

    1. 所谓轮播：container 默认展示第一张图片（索引为0的），wrapper 的 left 值为0。当第一次轮播后，container 展示图片为第二张图片（索引为1的图片），此时 wrapper 的 left 值是负的一张图片的宽度，第二次轮播后 container 展示的第三张图片（索引为2的图片），此时 wrapper 的 left 的值是多少：负的2张图片的宽度。。。。依次类推，wrapper 的 left 的值和 container 正在展示的图片索引的关系是：wrapper 的 left 值 = -1 索引 图片宽
  3. 实现轮播：我们设置一个变量 step，默认值0，表示 container 正在展示的图片索引。 向后轮播一次，给stepIndex++，然后把 wrapper 的 left 设置成：-1 stepIndex 图片宽

轮播图的无缝轮播原理： 向 wrapper 的末尾多拼接一个第一张图片，当轮播的时候，轮播到最后一张图片时，最后这张图片和第一张图片长得一模一样，此时我们把 wrapper 的 left 的值设置成0，left 为0时，container 展示的还是第一张图片，因为设为0的这个操作特别快，给人的感觉就是无缝轮播的；

html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>轮播图左右运动版</title>
  6.     <!-- IMPORT CSS -->
  7.     <link rel="stylesheet" href="css/reset.min.css">
  8.     <style>
  9.         .container {
  10.             position: relative;
  11.             box-sizing: border-box;
  12.             margin: 0 auto;
  13.             width: 1200px;
  14.             height: 240px;
  15.             overflow: hidden;
  16.         }
  18.         .container .wrapper {
  19.             position: absolute;
  20.             top: 0;
  21.             left: 0;
  22.             box-sizing: border-box;
  23.             width: 6000px;
  24.             height: 100%;
  25.             display: flex;
  26.         }
  28.         .container .wrapper .slider {
  29.             box-sizing: border-box;
  30.             width: 1200px;
  31.             height: 100%;
  32.         }
  34.         .container .wrapper .slider img {
  35.             width: 100%;
  36.             height: 100%;
  37.         }
  39.         /* 分页器 */
  40.         .pagenition {
  41.             position: absolute;
  42.             z-index: 999;
  43.             bottom: 10px;
  44.             left: 50%;
  45.             transform: translateX(-50%);
  46.             padding: 5px 10px;
  47.             background: rgba(255, 255, 255, .3);
  48.             font-size: 0;
  49.             border-radius: 26px;
  50.         }
  52.         .pagenition li {
  53.             display: inline-block;
  54.             margin: 0 10px;
  55.             width: 16px;
  56.             height: 16px;
  57.             border-radius: 50%;
  58.             background: lightblue;
  59.             cursor: pointer;
  60.         }
  62.         .pagenition li.active {
  63.             background: lightcoral;
  64.         }
  66.         /* 左右按钮 */
  67.         .arrow {
  68.             display: none;
  69.             position: absolute;
  70.             z-index: 999;
  71.             top: 50%;
  72.             margin-top: -22.5px;
  73.             width: 30px;
  74.             height: 45px;
  75.             background: url(images/pre.png) no-repeat 0 0;
  76.         }
  78.         .arrow.changeLeft {
  79.             left: 0;
  80.         }
  82.         .arrow.changeRight {
  83.             right: 0;
  84.             background-position: -50px 0;
  85.         }
  87.         .container:hover .arrow {
  88.             display: block;
  89.         }
  90.     </style>
  91. </head>
  93. <body>
  94.     <!-- 轮播图容器 -->
  95.     <div class="container">
  96.         <!-- WRAPPER存放所有的图 -->
  97.         <div class="wrapper">
  98.             <!-- SLIDER每一个轮播图 -->
  99.             <div class="slider">
  100.                 <img src="images/banner01.png" alt="">
  101.             </div>
  102.             <div class="slider">
  103.                 <img src="images/banner02.png" alt="">
  104.             </div>
  105.             <div class="slider">
  106.                 <img src="images/banner03.jpg" alt="">
  107.             </div>
  108.             <div class="slider">
  109.                 <img src="images/banner04.png" alt="">
  110.             </div>
  111.             <!-- 克隆的那份（无缝衔接） -->
  112.             <div class="slider">
  113.                 <img src="images/banner01.png" alt="">
  114.             </div>
  115.         </div>
  117.         <!-- PAGENATION分页器 -->
  118.         <ul class="pagenition">
  119.             <li class="active"></li>
  120.             <li></li>
  121.             <li></li>
  122.             <li></li>
  123.         </ul>
  125.         <!-- 左右按钮 -->
  126.         <a href="javascript:;" class="arrow changeLeft"></a>
  127.         <a href="javascript:;" class="arrow changeRight"></a>
  128.     </div>
  130.     <!-- IMPORT JS -->
  131.     <script src="js/jquery.min.js"></script>
  132.     <script src="js/banner.js"></script>
  133. </body>
  134. </html>

js

  1. // 防抖
  2. function debounce(func, wait, immediate) {
  3.     let timer = null,
  4.           result = null;
  5.     return function anonymous(...args) {
  6.         let context = this,
  7.               now = immediate && !timer;
  8.         clearTimeout(timer);
  9.         timer = setTimeout(() => {
  10.             timer = null;
  11.             !immediate ? result = func.call(context, ...args) : null;
  12.         }, wait);
  13.         now ? result = func.call(context, ...args) : null;
  14.         return result;
  15.     }
  16. }
  18. let bannerModule = (function () {
  19.     let $container = $('.container'),
  20.           $wrapper = $container.find('.wrapper'),
  21.           $changeLeft = $container.find('.changeLeft'),
  22.           $changeRight = $container.find('.changeRight'),
  23.           $pagenition = $container.find('.pagenition'),
  24.           $pagenitionList = $pagenition.find('li');
  25.     let step = 0,
  26.         autoTimer = null,
  27.         interval = 1000;
  29.     // 自动轮播
  30.     function autoMove() {
  31.         step++;
  32.         if (step >= 5) {
  33.             $wrapper.css('left', 0);
  34.             step = 1;
  35.         }
  36.         $wrapper.stop().animate({
  37.             left: -step * 1200
  38.         }, 300);
  39.         // 自动焦点对齐
  40.         autoFocus();
  41.     }
  43.     // 自动对焦
  44.     function autoFocus() {
  45.         let temp = step;
  46.         temp === 4 ? temp = 0 : null;
  47.         $pagenitionList.each((index, item) => {
  48.             let $item = $(item);
  49.             if (index === temp) {
  50.                 $item.addClass('active');
  51.                 return;
  52.             }
  53.             $item.removeClass('active');
  54.         });
  55.     }
  57.     // 点击焦点切换到指定的位置
  58.     function handlePagenition() {
  59.         $pagenitionList.click(debounce(function () {
  60.             let index = $(this).index();
  61.             step = index;
  62.             $wrapper.stop().animate({
  63.                 left: -step * 1200
  64.             }, 300);
  65.             autoFocus();
  66.         }, 300, true));
  67.     }
  69.     // 点击按钮处理
  70.     function handleArrow() {
  71.         // 右按钮处理（和自动一样）
  72.         $changeRight.click(debounce(autoMove, 300, true));
  73.         // 左按钮处理
  74.         $changeLeft.click(debounce(function () {
  75.             step--;
  76.             if (step < 0) {
  77.                 $wrapper.css('left', -4 * 1200);
  78.                 step = 3;
  79.             }
  80.             $wrapper.stop().animate({
  81.                 left: -step * 1200
  82.             }, 300);
  83.             autoFocus();
  84.         }, 300, true));
  85.     }
  87.     return {
  88.         init() {
  89.             autoTimer = setInterval(autoMove, interval);
  90.             // 控制自动轮播的暂停和开始
  91.             $container.on('mouseenter', () => clearInterval(autoTimer))
  92.                 .on('mouseleave', () => autoTimer = setInterval(autoMove, interval));
  93.             // 焦点点击
  94.             handlePagenition();
  95.             // 按钮点击
  96.             handleArrow();
  97.         }
  98.     }
  99. })();
  100. bannerModule.init();

左右运动的轮播图.png