最简单的轮播图

方法很简单
display：flex他们就能横着一行
然后data放两样东西，一个是你放图片的地址来6个，
一个是index（等会从第几个开始）

左侧按钮上一个
当按到0的时候就停在0那里

右侧按下一个
当图片的最后一个 等于 图片的最大值的时候就停止

next里面的那个i，原因是图片的第一个是0开始，而图片数量却是1开始所以才用Number减了1

<template>
    <div id="app">
        <button @click="prev">《</button>
        <img :src="img[index]" style="width: 400px; height: 400px;" alt="">
        <button @click="next">》</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            img: [
                require('./assets/01.jpg'),
                require('./assets/02.jpg'),
                require('./assets/03.jpg'),
                require('./assets/04.jpg'),
                require('./assets/05.jpg'),
                require('./assets/06.jpg')
            ],
            index: 0
        }
    },
    methods: {
        prev() {
            this.index == 0 ? this.index = 0 : this.index--

        },
        next() {
            var i = Number(this.img.length - 1)
            this.index == i ? this.index = i : this.index++
        }
    }
}
</script>


<style lang="less">
    *,
    a {
        transition: all .8s;
    }

    button {
        padding: 5px 10px;
        border: none;
        border: 1px solid #6b6b6b;
        background: #6b6b6b;
        color: #fff;
    }

    input {
        text-align: center;
        max-width: 40px;
        border: none;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 5px 10px;

    }

    #app {
        display: flex;
    }
</style>

---

还有一个更狠的招
直接用：disabled

左侧按钮 当index等于0时就开始暂停使用
右侧当index的值等于 图片的最大值-1的时候就停止

就这么简单！！！！！

<template>
    <div id="app">
        <button @click="prev" :disabled="index==0">《</button>
        <img :src="img[index]" style="width: 400px; height: 400px;" alt="">
        <button @click="next" :disabled="index==img.length-1">》</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            img: [
                require('./assets/01.jpg'),
                require('./assets/02.jpg'),
                require('./assets/03.jpg'),
                require('./assets/04.jpg'),
                require('./assets/05.jpg'),
                require('./assets/06.jpg')
            ],
            index: 0
        }
    },
    methods: {
        prev() { this.index-- },
        next() { this.index++ }
    }
}
</script>

---

用JS解决

方法非常简单
把最高的box添加position为父级，然后给后代的li变成absolute！这样就能摞在一起
然后所有的li变成隐藏，带有ths的li进行显示
剩下的就是延迟2秒循环
ths就是获取带有class的，next就是他屁股后面的！但是如果屁股后面没有就就换成第一个的

<style>
  .box {
      width: 600px;
      height: 340px;
      margin: 0 auto;
      position: relative;
  }
  .box li {
      position: absolute;
      list-style: none;
      opacity: 0;
      transition: linear .8s;
  }
  .box>ul>li>img {
      max-width: 600px;
  }
  li.ths{
      z-index: 1;
      opacity: 1;
  }
</style>

<div class="box">
  <ul>
    <li class="ths"><img src="1.jpg" alt=""></li>
    <li><img src="1.jpg" alt=""></li>
    <li><img src="1.jpg" alt=""></li>            
  </ul>
</div>

<script>
  setTimeout(function fn(){
      var ths = document.querySelector(".ths")
      var next = ths.nextElementSibling || document.querySelector(".box ul li:first-child")
      ths.classList.remove("ths")
      next.classList.add("ths")

      setTimeout(fn, 2000)
  }, 2000)
</script>

而我单独说一个next，这个解决如何进行反向！点击一下 下一张，返回可以返回 上一张

ths.nextElementSibling
document.querySelector(".box ul li:first-child")

ths.previousElementSibling 
document.querySelector(".box ul li:last-child")

---