Uni-APP开发，用Vue页面快速实现动态轮播

Vue快速实现动态轮播图

概述：Vue单页面，用html+css实现轮播效果

---

成果展示

提示：这里图片是用三方图片方便成果展示，不是自己做的图

一、开发工具和页面设定

1，开发工具
Hbuilder
2，页面设定
Vue页面，加入html+css。

二、个人理解

1.实现方式
（1）html部分，套div，一层一层的div方便后期修正和css套用。先设计类名，二是设计范围，最后是里面插入img标签，引入图片，格式要先做出来，最后是修正图片。也就是设置css样式。
（2）css部分，因为先是做了个div容器，咋们这里房5张图片，那么宽度自然就是容器的宽度×5。这样就能让图片滚动的时候不产生溢出等猫腻。
（3）动画的实现：一是animation属性（详见网上教程，有详细的讲解，这里我讲的不如人家，就不做详细介绍）；二是为了美观，滚动的方向设置float：left。三是关键帧，keyframes。我这里做的是**@keyframes playMoive函数，里面设置了从0%到100%的演绎规则，滚动设置默认是右，所以这里我们要加负值。

三，代码

1.html部分

代码如下：

<!-- 配置轮播图 -->
		      <!-- 轮播区域 -->
		         <div id="lunbohead">
		             <!-- 轮播区域 -->
		             <div class="carousel">
		                 <!-- 轮播内容的集合 -->
		                 <div class="carousel-begin">
		                     <!-- 轮播的内容 -->
		                     <div class="carousel-content">
		                         <img src=