vue实现简单轮播图_vue 图片轮播

做了一个轮播图，可以自动切换，鼠标放上去后停止，左右切换是用element ui加上去的，箭头间距不一样有点难受，之后再看吧，记录一下。 把宽高调成一致，删掉i里面的padding，或者把样式改成饿了么官方的圆按钮间距就一样了。最近毕业比较忙，先这样吧。做无缝轮播图可以参考下我主页用原生写的那个。

下面是html的图和按钮部分 v-for中必须要写index作为:key的值。button应该卸载img后面，写在前面的会被img遮住，加个z-index:1，调高图层就可以了。

<div id="window">
    <div class="cycle"
    @mouseenter="stop" 
    @mouseleave="start" >
      <div class="content" :style="changePic">
        <img
          v-for="(img_url, key) in img_src"
          :key="key"
          ref="imgs"
          :src="img_url.url"
          alt="这是轮播图"
        />
      </div>

      <div class="btn">
        <button class="left" @click="go(1)" href="#">
          <p>向左</p>
        </button>
        <button class="right" @click="go(-1)" href="#">
          <p>向右</p>
        </button>
      </div>

      <div class="bottom">
        <span
          v-for="(li, key) in img_src"
          :key="key"
          :class="{ active: key === index }"
        >
        <
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29