版本1：无缝循环轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ padding:0; margin:0;}
        .out{ width:590px; height: 470px; margin:100px auto; border:1px solid #ccc; position: relative; user-select: none;}
        .out .btn{ position:absolute; width:30px; height: 60px; background:rgba(0,0,0,0.3); color:#fff; font-size: 30px; text-align: center; line-height: 60px; font-family: "宋体"; top:calc(50% - 30px); cursor: pointer; transition: background 0.5s;}
        .out .btn:hover{ background:rgba(0,0,0,0.6)}
        .out .btnLeft{ left: 0;}
        .out .btnRit{ right:0;}
        .out .pic{ width:590px; height: 470px;}
        
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="out">
            <div class="btn btnLeft" @click="clickLeft">&lt;</div>
            <img class="pic" :src="picArr[num]" alt="">
            <div class="btn btnRit" @click="clickRit" >&gt;</div>
        </div>
        <h1>{{num}}</h1>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                num:0, //数据下标遍历值
                picArr:[
                    "images/pic1.webp",
                    "images/pic2.webp",
                    "images/pic3.webp",
                    "images/pic4.webp",
                    "images/pic5.webp",
                ]  //将图片路径放入数组
            },
            methods:{
               clickLeft:function(){
                    this.num--
                    if(this.num<0){ // 当下标小于0则下标更改为图片数组最后一个下标值
                        this.num= this.picArr.length-1
                    }
               },
               clickRit(){  //函数ES6简写，去掉":function"
                    this.num++
                    if(this.num>this.picArr.length-1){ // 当下标大于图片数组最后一个下标值则改为0
                        this.num=0
                    }
               }
            }
        })
    </script>
    
</body>
</html>

这样就实现了循环轮播图。

测试页面：

继续点击上一页，就会显示最后一页。