Vue的轮播

关于轮播图的讲解和应用

文章目录

• 前言
• 一、轮播图是什么？
• 二、使用步骤
  • 1.汇入思想
  • 2.写入方法
• 总结

  轮播图就是让一组宽高相同的图片，整齐平铺在一起，设置溢出滚动事件，将可见的窗口图片通过偏移量和定时器实现图片的滚动。在这些 图片的首尾添置一样的图形，防止出现一些空白的页面，让它看起来无缝衔接,并让它滚动起来。

---

 

轮播图html的代码：

设置一个窗口，用来展示轮播图，加上左右的按钮和下方的小圆点：

---

 轮播图的样式：

设置宽高，设置溢出隐藏，圆点按钮和左右按钮设置绝对定位，并且左右按钮设置为鼠标放上图标显示出来。

 

轮播图js的代码：

1: 定义需要的变量和元素的节点；

2：将第一张图和最后一张图连接起来，当到达最后一张图的时候，让它转弯返回第一张图片；

3：左按钮点击切换到上一张图片，右按钮点击切换到下一张图片；

4：鼠标进入和鼠标离开事件，当鼠标进入的时候，轮播图暂停轮播；当鼠标离开的时候，轮播图继续开始轮播；

5：小圆点点击切换图片，并且点击小圆点 高亮状态的切换。

 

提示：以上是原生js的轮播图

现在开始我们

最最精彩

最最常用到的

vue 轮播图了！！！

一、什么是轮播图？

简单来说：轮播图就是用于循环播放一组图片或内容。

二、使用步骤

1.引入库

代码如下 ：

import Vue from 'vue'; 
import { Swipe, SwipeItem } from 'vant';
 Vue.use(Swipe);
 Vue.use(SwipeItem);

2.读入数据

代码如下：

每个 SwipeItem 代表一张轮播卡片，可以通过 autoplay 属性设置自动轮播的间隔。

<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> 
  <van-swipe-item>1</van-swipe-item> 
  <van-swipe-item>2</van-swipe-item> 
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item> 
</van-swipe>

当然 也有样式啦。

<style>

  .my-swipe .van-swipe-item {

    color: #fff;

    font-size: 20px;

    line-height: 150px;

    text-align: center;

    background-color: #39a9ed;

  }

</style>

---

总结

提示：这里对轮播图进行总结：
以上就是今天要写的内容，本文仅仅简单介绍了轮播图的使用，而轮播图也提供了大量能使我们快速便捷地处理数据的函数和方法。