还算好看的css+js无限循环轮播图

话不多说，直接上代码吧！！！

<template>
  <div class="banner">
    <ul class="banner-ul">
      <li :class="item" @click='changeImg(item)' v-for='(item,idx) in pArr'>
        <img :src="imgArr[idx]" alt="">
      </li>
    </ul>
    <ul class="dot-ul">
      <li class="dot" @click='changeImg(imgArr[idx],idx)' :class="{cur:imgArr[index]==imgArr[idx]}" v-for='(item,idx) in pArr'></li>
    </ul>
  </div>

</template>
<script>
    export default {
        name: 'banner',
    props:['imgArr'],
        data (){
            return {
        pArr:["p1","p2","p3"],
        index:1
            }
        },
    mounted:function() {
      const that = this
      setInterval(()=>{
        that.nextImg();
      },3000);
    },
    methods:{
      previmg:function(){
        this.pArr.unshift(this.pArr[2]);
        this.pArr.pop();
        this.index--;
        this.index=this.index<0?this.pArr.length-1:this.index;
      },
      nextImg:function () {
        this.pArr.push(this.pArr[0]);
        this.pArr.shift();
        this.index++;
        this.index=this.index>this.pArr.length-1?0:this.index;
      },
      changeImg:function (item,idx) {
        if(arguments[1]){
          if(idx-this.index==1){
            this.nextImg();
          }else if(idx-this.index==2){
            this.nextImg();
            this.nextImg();
          }else if(idx-this.index==-1){
            this.previmg();
          }else if(idx-this.index==-2){
            this.previmg();
            this.previmg();
          }
          this.index = idx;
        }else{
          if(item=='p3'){
            this.previmg();
          }else if(item=='p1'){
            this.nextImg();
          }
        }
      }
    }
    }
</script>
<style>
  .banner{
    position: relative;
    overflow: hidden;
    width: 610px;
    height: 540px;
  }
  .banner .banner-ul li{
    position: absolute;
    cursor: pointer;
    transition: all .3s ease-out;
    width: 280px;
    height: 498px;
  }
  .p1{
    transform-origin:0 50%;
    opacity: 0.7;
    z-index: 2;
    transform:translate3d(0px,0,0) scale(0.9);
  }
  .p2{
    z-index: 3;
    opacity: 1;
    transform:translate3d(165px,0,0) scale(1);
  }
  .p3{
    transform-origin:100% 50%;
    opacity: 0.7;
    z-index: 2;
    transform:translate3d(330px,0,0) scale(0.9);
  }
  .banner li img{
      width: 100%;
      height: 100%;
  }
  .dot-ul{
    width:100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    text-align: center;
    line-height: 20px;
  }

  .dot-ul li{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    opacity: 0.5;
    background: #232323;
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
  }
  .dot-ul li.cur{
    background: #232323;
    opacity: 1;
  }


  @media (min-width: 1440px) {
    .banner{
      position: relative;
      width: 670px;
      height: 570px;
      overflow: hidden;
    }
    .banner .banner-ul li{
      width: 300px;
      height: 534px;
    }
    .p1{
        transform:translate3d(0px,0,0) scale(0.9);
    }
    .p2{
        transform:translate3d(170px,0,0) scale(1);
    }
    .p3{
        transform:translate3d(370px,0,0) scale(0.9);
    }
  }
</style>

本代码使用的是vue项目代码规范，其中包括切换下一张、上一张以及轮播图下面小点的点击效果及切换功能。
嘻嘻，就到这里吧撒拉嘿呦~