vue自动旋转圆形导航，可进行手动拨动

实例

<template>
  <div class="height jieruwang flexbox center">
      <div class='jrwLeft center' id="div1"    ref='bigcircle'  :style="{
                transform: `rotate(${turnRotate}deg)`,
                height:clientWidth+'px'
            }"  @mouseover="stop" @mouseout="start()">
          <div v-for="(item,idx) in cityList" :key='item+idx' @mousedown.prevent
                @mouseup.prevent
                @mousemove.prevent  :class='["city","city"+idx,city==item?"active":""]'  :style="computedCardPosStyle(idx-1)"  >{{item}}</div>
            <div class='block center'  :style="{transform: `rotate(${-turnRotate}deg)`}">
                <div class='middle center'>
                    <!-- <p>{{city}}-信息概览</p>
                    <div class='block center leftTitle'>
                        <div class='small center'>
                            <div class=' center' ref='svg'>
                                <svg :width='width' :height='height'>
                                        <a  v-for='(tag,idx) in tags' :key='idx+"only"'>
                                            <text :x='tag.x' :y='tag.y'  :font-size='14 * (600/(600-tag.z))' :fill-opacity='((400+tag.z)/600)' stroke='#559ae7' stroke-width="1" fill='#559ae7'>{{tag.text}}</text>
                                        </a>
                                    </svg>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import $ from 'jquery'
export default {
  name: 'jieruwang',
  components: {},
  data() {
    return {
   cityList:['全省','郑州','开封','洛阳','平顶山','安阳','鹤壁','新乡','焦作','濮阳','许昌','漯河','三门峡','南阳','商丘','信阳','周口','驻马店','济源'],
        timer:null,
        a0:0,
        a1:0,
        circleTimer:null,
        clientWidth:500,
        smallcircle:120,
        msg:{},
        city:'全省',
        startX: 0,
        endX: 0,
        UDLMactionTimer: null,
        mouseIsDown: false,
        xGap: 0,
        lastSpeed: 0,
        direction: 1,
        containerScale: 1,
        // 配置
        timeGap: 20,
        turnRotateProportion: 500,
        reduceSpeed: 0.7,
        turntableR:200,
        cardCount:19,
        pause:'',
        wxwpause:'',
        zqpause:'',
        clickType:'',
    }
  },
  created() {
      
   },
  mounted(){
    this.$nextTick(()=>{
         this.start()
        let container_dom = this.$refs.bigcircle;
        container_dom.addEventListener('mousedown', this.handleMouseDown.bind(this));
        container_dom.addEventListener('mouseup', this.handleMouseUp.bind(this));
        container_dom.addEventListener('mouseleave', this.handleMouseUp.bind(this));
        container_dom.addEventListener('mousemove', this.handleMouseMove.bind(this));
        container_dom.addEventListener('touchstart', this.handleMouseDown.bind(this));
        container_dom.addEventListener('touchend', this.handleMouseUp.bind(this));
        container_dom.addEventListener('touchcancel', this.handleMouseUp.bind(this));
        container_dom.addEventListener('touchmove', this.handleMouseMove.bind(this));
        window.addEventListener('resize', this.responseContainerScale.bind(this));
        window.addEventListener('load', this.responseContainerScale.bind(this));
    })
    
  },
beforeDestroy(){
    let container_dom = this.$refs.bigcircle;
    container_dom.removeEventListener('mousedown', this.handleMouseDown.bind(this));
    container_dom.removeEventListener('mouseup', this.handleMouseUp.bind(this));
    container_dom.removeEventListener('mouseleave', this.handleMouseUp.bind(this));
    container_dom.removeEventListener('mousemove', this.handleMouseMove.bind(this));
    container_dom.removeEventListener('touchstart', this.handleMouseDown.bind(this));
    container_dom.removeEventListener('touchend', this.handleMouseUp.bind(this));
    container_dom.removeEventListener('touchcancel', this.handleMouseUp.bind(this));
    container_dom.removeEventListener('touchmove', this.handleMouseMove.bind(this));
    window.removeEventListener('resize', this.responseContainerScale.bind(this));
},

  methods: {
    handleMouseDown(e){
        clearInterval(this.UDLMactionTimer);
        this.mouseIsDown = true;
        this.startX = e.clientX || e.touches[0].clientX;
        this.endX = e.clientX || e.touches[0].clientX;
    },
    handleMouseUp(){
        this.mouseIsDown = false;
        clearInterval(this.timer);
        this.timer = null;
        this.startX = 0;
        this.endX = 0;
        if(this.lastSpeed) this.UDLMaction();
    },
    handleMouseMove(e){
        this.endX = e.clientX || e.touches[0].clientX;
        if(!this.mouseIsDown) return;
        if(!this.timer){
            this.timer = setInterval(() => {
                let moveGap = this.endX - this.startX;
                this.lastSpeed = moveGap/this.timeGap;
                this.xGap += moveGap;
                this.direction = moveGap > 0 ? 1 : -1;
                this.startX = this.endX;
            }, this.timeGap);
        }
    },
    computedCardPosStyle(index){
          return {
            transform: `rotate(${-this.turnRotate}deg)`,
        }
    },
    UDLMaction(){
        let a = -this.reduceSpeed*this.direction;
        this.UDLMactionTimer = setInterval(() => {
            this.lastSpeed = (this.lastSpeed + a)*this.direction >= 0? this.lastSpeed + a: 0;
            this.xGap += (this.lastSpeed) * this.timeGap;
            if(!this.lastSpeed){
                this.moreDynamic();
                return clearInterval(this.UDLMactionTimer);
            }
        }, this.timeGap);
    },
    moreDynamic(){
        let time = 10;
        let timer = setInterval(() => {
            this.xGap += this.direction*3;
            if(--time <= 0) clearInterval(timer);
        }, 20)
    },
    responseContainerScale(){
        if(window.innerWidth < 650){
            this.containerScale = window.innerWidth/650;
            this.turnRotateProportion = 800;
        }
    },
    posimgs1(obj) {
      var da = obj.da, a0 = obj.a0;
      var classname=obj.classname,circlename=obj.circlename;
      var w=obj.w
      var centerx = obj.centerx, centery = obj.centery||w, r = w-12;
      for (var i = 0; i < $('.'+circlename).length; i++) {
        $('.'+circlename)[i].style.left = centerx + r * Math.cos((da * i + a0) / 180 * Math.PI) + "px";
        $('.'+circlename)[i].style.top = centery + r * Math.sin((da * i + a0) / 180 * Math.PI) + "px";
      }
    },
    start() {
      var that = this;
      const timer = window.setInterval(function () {
          var w=$('.jrwLeft').width()/2
          var obj={
              classname:'jrwLeft',
              circlename:'city',
              da: 18.9, //图片间隔角度
              a0: that.a0, //已旋转角度,
              w:w-12,
              centerx:w-12,
              centery:w-12
          }
        that.posimgs1(obj);
        that.a0++
      }, 200);
      that.circleTimer = timer
      that.$once('hook:beforeDestroy', () => {
        clearInterval(this.circleTimer);
      })
    },
    stop() {
      window.clearInterval(this.circleTimer);
    },
  },
  computed:{
    turnRotate(){
        return this.xGap*this.turnRotateProportion / (2*Math.PI*this.turntableR);
    },
  },
}
</script>
<style lang="less" scoped>
.jieruwang{
    width: 99%;
    height:100%;
    overflow: hidden;
    .jrwLeft{
       position: relative;
       width:500px;
       height:auto;
       border-radius:50%;
       min-width:400px;
       min-height:400px;
       background-color: #070e3a;
       z-index:2;
        cursor: pointer;
       .city{
           position: absolute;
           color: #559ae7;
           font-size: 12px;
           z-index: 0;
           
       }
       .city:hover{
           text-decoration: underline;
           cursor: pointer;
       }
      
       .block{
            width:82%;
            height:82%;
            border-radius:50%;
            background-color: #070a24;
            text-align: center
       }
        .middle{
        width:90%;
        height:90%;
        border-radius:50%;
        position: relative;
        background-color: #070e3a;
        >p{
          position: absolute;
          top:2%;
          left: 36%;
          font-size:14px; 
          color: #559ae7;
        }
    }
    .leftTitle{
        position: relative;
    }
    .leftTitle::after{
        position: absolute;
        content: 'O/B/M域';
        //width:100%;
        text-align: center;
        //height: 12%;
        left:40%;
        top:1%;
        font-size: 14px;
       // line-height:2;
        color: #559ae7;
    }
    
      
    }
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotate1 {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(-360deg);
    }
}
@-webkit-keyframes rotate1 {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}
  @keyframes myfirst{
    0% {
        left:0%;
    }
    25% {
        left:25%;
    }
    50% {
        left:50%;
    }
    75% {
        left:75%;
    }
    100% {
         left:100%;
    }
}
.pause {//动画暂停
     -webkit-animation-play-state:paused!important;
      animation-play-state: paused!important;
    p,img{
        -webkit-animation-play-state:paused!important;
       animation-play-state: paused!important;
        cursor: pointer;
    }
  }
  .pause::after{
      -webkit-animation-play-state:paused!important;
      animation-play-state: paused!important;
  }
 .active{
    font-weight: bold;
    text-decoration: underline;
    color: #EC725B!important
}
.small{
    font-size: 10px;
}
</style>