轮播图slider

在当前网页中，轮播图是再频繁不过的一个效果了，看到很多页面的首页开头都是轮播图。关于vue的轮播图的组件，我之前跟着做的项目实行了不同的两种方案。我下面将自己所学习的写下来，作为自己的知识的积累和记忆。

首先第一种方式: 要展现的数据全部通过props由父组件传递给子组件，并进行渲染。主要的渲染布局全部在子组件中进行编写，之后需要调用的话直接传递数据就可以了。我个人觉得这种写法方便以后调用。但是这种组件进行封装的难度估计会比较大吧。

上代码: 

      <div class="slider-img" @click="btn">
          <a :href="slides[1].href">
              <transition name="slider-trans">
                <img :src="slides[nowIndex].src" v-if="isShow">
              </transition>
              <transition name="slider-trans-old">
                <img :src="slides[nowIndex].src" v-if="!isShow">
              </transition>
          </a>
      </div>

CSS样式: 

.slide-trans-enter-active {
  transition: all 1s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all 1s;
  transform: translateX(-900px);
}
.slide-show {
  position: relative;
  margin: 15px 15px 15px 0;
  width: 900px;
  height: 500px;
  overflow: hidden;
}
.slide-img {
  width: 100%;
}
.slide-img img {
  width: 100%;
  position: absolute;
  top: 0;
}

开始，我以为是将一长串图片浮动横放入一个绝对定位的ul盒子里，然后通过定时器移动ul盒子的left值进行轮播，因为以前JS源码写的就是采取这种方案。但是今天仔细看了代码后发现不是这样的。

上面的方法，布局方面大同小易。但是轮播的思路不是以往的那样。利用vue提供的过渡组件来进行轮播效果

<transition name="v"></transition>

过程如图所示:

布局中是两个图片img元素分别提供了相反的v-if="isShow" 和 v-if="!isShow"。一个显示另一个不显示。第一个对应的是

.slide-trans-enter-active {
  transition: all 1s;
}
.slide-trans-enter {
  transform: translateX(900px);
}

这段代码表示当isShow=true时，第一个img元素是显示的，并且根据transform: translateX(900px)。在渲染的时候，img应当在以它原有位置的基础上（x轴方向上）偏移900px；的距离进行缓慢滑入，如图&#x