知识储备

  • jQuery 方法
    1. 根据选择器获取元素：$(selector)
    2. ajax 方法及配置参数 $.ajax({})
    3. 绑定事件 on方法
    4. html() 方法
    5. css() 方法
    6. addClass()、removeClass() 方法
    7. animate() 动画方法 finish() 结束动画方法
  • 定时器基础：
    1. js 动画的原理就是利用定时器操作某个样式值缓慢增加，轮播图操作的是 wrapper 元素的 left 属性。
    2. 停止动画就是清除定时器，再次开启动画即重新开启定时器；
    3. 定时器 setTimeout 和 setInterval 的返回值是一个定时器 id；
    4. clearTimeout(定时器 id)和 clearInterval(定时器 id)；

轮播图需求：

  1. 制作一个轮播图（又称焦点图），自动轮播，并且轮播图下焦点跟随切换；
  2. 当鼠标移入轮播图时，轮播图停止自动轮播，并且展示手动切换的箭头图标，当鼠标移出轮播图时，继续自动轮播，隐藏手动切换箭头图标；
  3. 当点击手动控制轮播箭头图标的时候，可以手动切换图片。如果点击左侧箭头，则切换至上一张，如果切换到第一张，再次点击则切换至最后一张，依此类推；如果点击右侧箭头，则切换至下一张，如果已经是最后一张，再次点击则切换至第一张，实现循环播放；
  4. 点击焦点时，对应索引的图片也要跟随切换；

轮播图原理：

  1. 有一个外面的盒子 container，container 的宽度只能展示一张图片，其余的溢出隐藏。
  2. 在 container 里面有一个 wrapper 的盒子，里面装着很多张图片，这些图片在一行排列，而 wrapper 相对于 container 绝对定位，初始值 left = 0，所以默认展示第一张图片（第一张图片索引为 0）。
  3. 轮播一次其实就是让 wrapper 盒子向左移动一张图片的距离（操作 wrapper 的 left 值），这样第二张（索引为 1）图片就露出来了（此时 wrapper 的 left 的值是 负的 1 张图片的宽度），里面的盒子再向左移动一张，第三张（索引为 2）就露出来了（此时 wrapper 的 left 值是 负的 2 张图片的宽度），依次类推，我们发现如果想让轮播图轮到第几张，就将 wrapper 的 left 值设置成：负的图片宽度 * 索引。
展示图片 图片索引 wrapper 的 left 值
1 0 0 * 图片宽度
2 1 -1 * 图片宽度
3 2 -2 * 图片宽度
4 3 -3 * 图片宽度
  1. 综上，我们需要有个变量 stepIndex，记录着要轮播的是第几张，然后轮播时就是让 wrapper 的 left 值就是负的 stepIndex 乘以图片宽度，即 left = -1 stepIndex 1000 (1000 是图片宽度)

无缝轮播实现

  1. 我们首先复制一份第一张图片并且把复制的这个放到末尾，相当于真实图片的最后一张后面还有一个第一张的副本。
  2. 然后当轮播到最后一张的时候，这个时候展示的是我们第一步复制过来的第一张图片，下一次再轮播应该展示第二张图了。
  3. 这个时候我们将 wrapper 的 left 设置成 0，然后 left 为 0 时展示的是真正的第一张，下一张要轮播的是第二张所以我们将 stepIndex 的值置为 1（1 就是第二张图的索引），然后再轮播就是第二张图了。
  4. 又因为浏览器设置 wrapper 的值基本不需要时间，所以给人的感觉就是无缝轮播的。

html代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>珠峰培训-轮播图</title>
  6.     <link rel="stylesheet" href="css/reset.min.css">
  7.     <link rel="stylesheet" href="css/banner.css">
  8. </head>
  9. <body>
  10. <section class="container" id="container">
  11.     <div class="wrapper">
  12.         <!--<div class="slide"><img src="img/banner1.jpg" alt=""></div>
  13.         <div class="slide">
  14.             <img src="img/banner2.jpg" alt="">
  15.         </div>
  16.         <div class="slide"><img src="img/banner3.jpg" alt=""></div>
  17.         <div class="slide"><img src="img/banner4.jpg" alt=""></div>-->
  18.     </div>
  19.     <ul class="focus">
  20.         <!-- <li class="active"></li>
  21.          <li></li>
  22.          <li></li>
  23.          <li></li>-->
  24.     </ul>
  25.     <a href="javascript: void 0;" class="arrow arrowLeft"></a>
  26.     <a href="javascript: void 0;" class="arrow arrowRight"></a>
  27. </section>
  29. <!--<section class="container" id="container2">
  30.     <div class="wrapper">
  31.         &lt;!&ndash;<div class="slide"><img src="img/banner1.jpg" alt=""></div>
  32.         <div class="slide">
  33.             <img src="img/banner2.jpg" alt="">
  34.         </div>
  35.         <div class="slide"><img src="img/banner3.jpg" alt=""></div>
  36.         <div class="slide"><img src="img/banner4.jpg" alt=""></div>&ndash;&gt;
  37.     </div>
  38.     <ul class="focus">
  39.         &lt;!&ndash; <li class="active"></li>
  40.          <li></li>
  41.          <li></li>
  42.          <li></li>&ndash;&gt;
  43.     </ul>
  44.     <a href="javascript:;" class="arrow arrowLeft"></a>
  45.     <a href="javascript:;" class="arrow arrowRight"></a>
  46. </section>-->
  48. <script src="js/jquery.js"></script>
  49. <script src="js/banner.js"></script>
  50. <!--<script>-->
  51.     <!--let b1 = new Banner({-->
  52.         <!--ele: '#container',-->
  53.         <!--url: 'json/banner.json',-->
  54.         <!--speed: 100-->
  55.     <!--});-->
  57.     <!--let b2 = new Banner({-->
  58.         <!--ele: '#container2',-->
  59.         <!--url: 'json/banner2.json',-->
  60.         <!--interval: 1000,-->
  61.         <!--speed: 500-->
  62.     <!--});-->
  63. <!--</script>-->
  64. </body>
  65. </html>

css 代码

  1. .container {
  2.     position: relative;
  3.     margin: 20px auto;
  4.     width: 1000px;
  5.     height: 300px;
  6.     overflow: hidden;
  7. }
  9. .container .wrapper {
  10.     position: absolute;
  11.     top: 0;
  12.     left: 0;
  13.     width: 4000px; /*根据 JS 中获取的数据动态控制宽度*/
  14.     height: 100%;
  15. }
  17. .container .wrapper .slide {
  18.     float: left;
  19.     width: 1000px;
  20.     height: 100%;
  21.     overflow: hidden;
  22. }
  24. .container .wrapper .slide img {
  25.     display: block;
  26.     width: 100%;
  27.     height: 100%;
  28. }
  30. .container .focus {
  31.     position: absolute;
  32.     z-index: 999;
  33.     bottom: 10px;
  34.     left: 50%;
  35.     transform: translateX(-50%); /*基于CSS3中的 transform 变形属性，在不固定的宽度的情况下实现水品居中 translateX:让当前元素在水平方向发生位移(此处-50%向左移动当前盒子的一半)*/
  37.     padding: 4px;
  38.     height: 12px;
  39.     background: rgba(0, 0, 0, .5);
  40.     border-radius: 10px; /*让其为盒子高度的一半,这样把长方型的盒子修改为椭圆状*/
  41.     font-size: 0;
  42. }
  44. .container .focus li {
  45.     display: inline-block;
  46.     margin: 0 4px;
  47.     width: 12px;
  48.     height: 12px;
  49.     border-radius: 50%;
  50.     background: #FFF;
  51.     cursor: pointer;
  52. }
  54. .container .focus li.active {
  55.     background: #DB192A;
  56. }
  58. .container .arrow {
  59.     display: none;
  60.     position: absolute;
  61.     top: 50%;
  62.     margin-top: -22.5px;
  63.     width: 28px;
  64.     height: 45px;
  65.     background: url("../img/pre.png") no-repeat;
  66.     opacity: 0.3;
  67. }
  69. .container .arrow:hover {
  70.     opacity: 1;
  71. }
  73. .container .arrow.arrowLeft {
  74.     left: 0;
  75.     background-position: 0 0;
  76. }
  78. .container .arrow.arrowRight {
  79.     right: 0;
  80.     background-position: -50px 0;
  81. }

js 代码

  1. let bannerRender = (function () {
  2.   // -> 获取后续需要操作的对象或者元素
  3.   let container = $('#container'),
  4.     wrapper = $('.wrapper'),
  5.     focus = $('.focus'),
  6.     arrowLeft = $('.arrowLeft'),
  7.     arrowRight = $('.arrowRight'),
  8.     slideList = null,
  9.     focusList = null;
  11.   // => 轮播图运动的基础参数
  12.   let stepIndex = 0; // stepIndex 记录当前展示块的索引
  13.   let autoTimer = null; // autoTimer 自动轮播的定时器
  14.   let interval = 3000; // interval 间隔多长时间自动切换
  16.   // autoMove：控制轮播图的运动和切换
  17.   /*
  18.   * 索引为1，展示第二张，warpper 的 left - 1000;
  19.   * 索引为2，展示第三章，wrapper 的 left - 2000；
  20.   * ....
  21.   * wrapper 的 left 值其实就是当前要展示的图片索引对应的结果 ：-索引 * 1000
  22.   * */
  24.   function autoMove() {
  25.     stepIndex++;
  26.     if (stepIndex >= slideList.length) {
  27.       // 说明再往后切换没有了，现在展示的是克隆的第一张，此时我们将 wrapper 设置到回到真实的第一张的位置，即 left = 0，然后 stepIndex = 1，这样就可以切换到第二张了
  28.       wrapper.css('left', 0);
  29.       stepIndex = 1;
  30.     }
  31.     wrapper.animate({
  32.       left: -stepIndex * 1000
  33.     }, 200); // 200 是从当前切换到下一张的动画时间 interval 是间隔多久切换一次
  35.     // -> 每一次运动完成需要让焦点跟着切换
  36.     changeFocus();
  37.   }
  39.   // changeFocus: 让焦点跟着轮播图切换而切换（运动到克隆的这一张的时候，也需要让第一个 li 有选中的样式
  41.   function changeFocus() {
  42.     // 当轮播图运动到最后一张（克隆的第一张，我们需要让第一个 li 有选中样式，之所以使用 tempIndex 是因为 stepIndex 对轮播图切换起着很大作用，不能轻易修改）
  43.     let tempIndex = stepIndex;
  44.     tempIndex === slideList.length - 1
  45.       ? tempIndex = 0
  46.       : null;
  47.     focusList.each((index, item) => {
  48.       if (index === tempIndex) {
  49.         $(item).addClass('active')
  50.       } else {
  51.         $(item).removeClass('active')
  52.       }
  53.     })
  54.   }
  56.   // queryDate：获取数据
  57.   function queryData(onSuccess, onError) {
  58.     $.ajax({
  59.       url: 'json/banner.json',
  60.       method: 'GET',
  61.       dataType: 'json',
  62.       async: false,
  63.       success: onSuccess,
  64.       error: onError
  65.     })
  66.   }
  68.   // bindHTML：数据绑定
  69.   function bindHTML(data) {
  70.     let strSlide = ``;
  71.     let strFocus = ``;
  72.     data.forEach((item, index) => {
  73.       let {
  74.         img = 'img/banner1.jpg',
  75.         desc = '珠峰培训'
  76.       } = item;
  77.       strSlide += `<div class="slide">
  78.         <img src="${img}" alt="${desc}">
  79.       </div>`;
  81.       strFocus += `<li class="${index === 0 ? 'active' : '' }"></li>`
  82.     });
  84.     // 将第一张克隆一份放到最后
  85.     strSlide += `<div class="slide">
  86.         <img src="${data[0].img}" alt="${data[0].desc}">
  87.       </div>`
  89.     // 插入到容器中
  90.     wrapper.html(strSlide);
  91.     focus.html(strFocus);
  93.     // -> 获取所有的 slide 和 li
  94.     slideList = $('.slide');
  95.     focusList = $('.focus > li');
  97.     // -> 根据 slide 的个数动态计算 wrapper 的宽度
  98.     wrapper.css({
  99.       width: slideList.length * 1000
  100.     }) 
  101.   }
  103.   // handleContainer 鼠标进入后停止自动轮播，离开后开始自动轮播；
  104.   function handleContainer() {
  105.     container.on('mouseenter', function () {
  106.       clearInterval(autoTimer);
  107.       arrowLeft.css({
  108.         display: 'block'
  109.       });
  110.       arrowRight.css({
  111.         display: 'block'
  112.       })
  113.     }).on('mouseleave', function () {
  114.       clearInterval(autoTimer);
  115.       autoTimer = setInterval(autoMove, interval);
  116.       arrowLeft.css({
  117.         display: 'none'
  118.       });
  119.       arrowRight.css({
  120.         display: 'none'
  121.       })
  122.     });
  123.   }
  125.   // 点击箭头切换轮播
  127.   function handleArrow() {
  128.     arrowRight.click(autoMove);
  129.     arrowLeft.click(function () {
  130.       stepIndex--;
  131.       if (stepIndex < 0) {
  132.         // 如果索引减减后小于 0，说明当前已经是第一张，不能向右运动了，如果再减就该展示最后一张图片了（这里的最后一张应该是真实的最后一张图，而不是我们复制出来的那个），最后一张在 slide 中的位置是倒数第二，即索引位置是 length - 2
  133.         wrapper.css({
  134.           left: -(slideList.length - 1) * 1000
  135.         });
  136.         stepIndex = slideList.length - 2;
  137.       }
  138.       wrapper.finish().animate({
  139.         left: -stepIndex * 1000
  140.       }, 200);
  141.       changeFocus();
  142.     })
  143.   }
  145.   // 点击焦点切换
  146.   function handleFocus() {
  147.     focusList.on('click', function () {
  148.       // 给每个焦点绑定点击事件，点击的是谁，就让 stepIndex 的值等于谁的索引，然后运动到这里
  149.       let focusIndex = $(this).index();
  150.       stepIndex = index;
  151.         wrapper.finish().animate({
  152.           left: -focusIndex * 1000
  153.         }, 200);
  154.         changeFocus();
  155.     })
  156.   }
  158.   // queryData(bindHTML);
  159.   // handleContainer();
  160.   // handleArrow();
  161.   // handleFocus();
  162.   // autoTimer = setInterval(autoMove, interval)
  164.   return {
  165.     init() {
  166.       queryData(bindHTML);
  167.       handleContainer();
  168.       handleArrow();
  169.       handleFocus();
  170.       autoTimer = setInterval(autoMove, interval)
  171.     }
  172.   }
  174. })();
  176. bannerRender.init();