轮播图:有限的空间,循环展示多个内容

功能:

  1. 图片切换显示
  2. 上一张，下一张按钮点击
  3. 底部指示条高亮
  4. 自动播放，鼠标移入开始，鼠标移出继续

一: 封装轮播图:

  1.    创建 src/components/xtx-carousel.vue
  1. <template>
  2.   <div class='xtx-carousel'>
  3.     <ul class="carousel-body">
  4.       <li class="carousel-item fade">
  5.         <RouterLink to="/">
  6.           <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg" alt="">
  7.         </RouterLink>
  8.       </li>
  9.     </ul>
  10.     <a href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
  11.     <a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
  12.     <div class="carousel-indicator">
  13.       <span v-for="i in 5" :key="i"></span>
  14.     </div>
  15.   </div>
  16. </template>
  18. <script>
  19. export default {
  20.   name: 'XtxCarousel'
  21. }
  22. </script>
  23. <style scoped lang="less">
  24. .xtx-carousel{
  25.   width: 100%;
  26.   height: 100%;
  27.   min-width: 300px;
  28.   min-height: 150px;
  29.   position: relative;
  30.   .carousel{
  31.     &-body {
  32.       width: 100%;
  33.       height: 100%;
  34.     }
  35.     &-item {
  36.       width: 100%;
  37.       height: 100%;
  38.       position: absolute;
  39.       left: 0;
  40.       top: 0;
  41.       opacity: 0;
  42.       transition: opacity 0.5s linear;
  43.       &.fade {
  44.         opacity: 1;
  45.         z-index: 1;
  46.       }
  47.       img {
  48.         width: 100%;
  49.         height: 100%;
  50.       }
  51.     }
  52.     &-indicator {
  53.       position: absolute;
  54.       left: 0;
  55.       bottom: 20px;
  56.       z-index: 2;
  57.       width: 100%;
  58.       text-align: center;
  59.       span {
  60.         display: inline-block;
  61.         width: 12px;
  62.         height: 12px;
  63.         background: rgba(0,0,0,0.2);
  64.         border-radius: 50%;
  65.         cursor: pointer;
  66.         ~ span {
  67.           margin-left: 12px;
  68.         }
  69.         &.active {
  70.           background:  #fff;
  71.         }
  72.       }
  73.     }
  74.     &-btn {
  75.       width: 44px;
  76.       height: 44px;
  77.       background: rgba(0,0,0,.2);
  78.       color: #fff;
  79.       border-radius: 50%;
  80.       position: absolute;
  81.       top: 228px;
  82.       z-index: 2;
  83.       text-align: center;
  84.       line-height: 44px;
  85.       opacity: 0;
  86.       transition: all 0.5s;
  87.       &.prev{
  88.         left: 20px;
  89.       }
  90.       &.next{
  91.         right: 20px;
  92.       }
  93.     }
  94.   }
  95.   &:hover {
  96.     .carousel-btn {
  97.       opacity: 1;
  98.     }
  99.   }
  100. }
  101. </style>

二: 全局注册轮播图

  1.  import XtxCarousel from './xtx-carousel.vue'
  2. const myPlugin =  {
  3.   install (app) {
  4.    app.component(XtxCarousel.name, XtxCarousel)
  5.   }
  6. }
  7. export default myPlugin  ----> 然后在 main.js里面引入

三: 渲染结构

步骤:

  1. 定义获取广告图API函数
  2. 在父组件获取轮播图数据，传递给xtx-carousel组件 父还传了一个duration()
  3. 在xtx-carousel组件完成渲染 v-for渲染图片

注意:

fade这个类是用来控制显示当前图片的； active激活指示条
需要一个索引数据，默认渲染第一张图和激活指示条中的第一个点

四: 逻辑封装

一: 自动播放:


  • 暴露自动轮播属性，设置了就自动轮播
  • 暴露自动播放间隔时间
  • 如果有自动播放，鼠标进入离开，暂停，开启

  • 销毁组件时清理定时器

    1. 离开暂停: 如果有自动播放，鼠标进入离开，暂停，开启
  1. 销毁组件,清理定时器

二: 上下切换指示器

思路: 封装一个函数，处理上一张，下一张按钮的回调。

  1.        ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1626655215235-777d896e-1d15-414b-b774-4704d3678552.png#clientId=u0c34f02f-f38c-4&from=paste&height=149&id=u64a8a6aa&margin=%5Bobject%20Object%5D&name=image.png&originHeight=298&originWidth=760&originalType=binary&ratio=1&size=45508&status=done&style=none&taskId=u9acf8e68-b233-45e1-9a63-3247f9d89f7&width=380)