Vue实现轮播图效果

Vue实现的轮播图，初始化后自动轮播，鼠标移入停止轮播，点击图片跳转链接，可指定宽高，左右切换方向可控，静态效果如下：

使用Vue的transition-group来实现，布局如下：

<div class="carousel_swipe" v-bind:id="'carousel_swipe'+id" @mouseenter.stop="handleStop" @mouseleave.stop="handleGo">
  <!--图片轮播区域-->
    <transition-group :name="'list-'+ (direction === 'forward' ? 'in' : 'out')" tag="ul" class="swipe_list">
        <li v-for="(item,index) in images" :key="index+1" class="list-item" v-show="index===currentIndex">
            <a :href="item.url" target="_blank">
                <img  alt="" :src="item.src">
            </a>
        </li>
    </transition-group>
  <!--控制点-->
    <div class="swipe_dian">
        <span v-for="(item,index) in images" :class="{'active':index===currentIndex}"
        :key="index" @mouseover="handleChange(index)"></span>
    </div>
  <!--左右控制，使用elementUI 的图标-->
    <div class="swipe_control" v-bind:id="'swipe_control'+id" v-show="control">
        <i class="el-icon-arrow-left prev" v-on:click="handleChange(prevIndex)"></i>
        <i class="el-icon-arrow-right next" v-on:click="handleChange(nextIndex)"></i>
    </div>
  <!--底部标题-->
    <div class="swipe_title" v-for="(item,index) in images" v-show="index===currentIndex" :key="index">
        {{item.title}}
    </div>
    <div class="swipe_bottom"></div>
</div>

使用currentIndex变量来控制图片的展示，使用css来控制切换的动画效果：

/*切换到下一张的变化*/
.list-in-enter-to {
    transition: all 1s ease;
    transform: translateX(0);
}
.list-in-leave-active {
    transition: all 1s ease;
    transform: translateX(-100%);
}
.list-in-enter {
    transform: translateX(100%);
}
.list-in-leave {
    transform: translateX(0);
}

/*切换到上一张的变化*/
.list-out-leave {
  transform: translateX(0);
}
.list-out-leave-active {
  transition: all 1s ease;
  transform: translateX(100%);
}
.list-out-enter {
  transform: translateX(-100%);
}
.list-out-enter-to {
  transition: all 1s ease;
  transform: translateX(0);
}

开启、停止、控制轮播的方法如下:

  methods: {
      /**
       * 开始轮播
       */
      handleGo() {
        this.control = false;
        this.timer = setInterval(() => {
          this.currentIndex++;
          if (this.currentIndex > this.images.length - 1) {
            this.currentIndex = 0;
          }
        }, 3000);
      },
      /**
       * 停止轮播
       */
        handleStop() {
            this.control = true;
            clearInterval(this.timer);
            this.timer = null;
        },
      /**
       * 控制左右切换
       * @param index
       */
        handleChange(index) {
            if(index> this.currentIndex){
              this.direction='forward'
            }else{
              this.direction=''
            }
            this.currentIndex = index;
        }
    }

使用计算属性computed计算currentIndex的值：

computed: {
        prevIndex() {
            if (this.currentIndex === 0) {
                return this.images.length - 1;
            } else {
                return this.currentIndex - 1;
            }
        },
        nextIndex() {
            if (this.currentIndex === this.images.length - 1) {
                return 0;
            } else {
                return this.currentIndex + 1;
            }
        }
    }

为了能在同一页面内多次使用轮播组件，每个组件的id都不一样，因此在组件创建的时候生成随机数作为id的一部分：

data() {
        return {
            id: 0,
            currentIndex: 0,
            timer: "",
            control: false,
            direction:'forward'
        }
    },

created() {
        this.id = Math.random();
    }

图片数据可控，宽高可控，这些值需从父组件传入，在props中定义：

props: {
        imageWidth: {
            type: Number,
            default: 28 //单位：rem
        },
        imageHeight: {
            type: Number,
            default: 19 //单位：rem
        },
        images: {
            type: Array,
            default: function () {
                return [];
            }
        }
    }

在mounted的时候改变组件的宽高和启动轮播：

mounted() {
        document.getElementById("carousel_swipe"+this.id).style.width =
            this.imageWidth +"rem";
        document.getElementById("carousel_swipe"+this.id).style.height =
            this.imageHeight + "rem";
        document.getElementById("swipe_control"+this.id).style.top =
            this.imageHeight / 2 - 1 + "rem";
        this.handleGo();
    }

至此，轮播组件已完成，加上相关css就可以使用了！

.carousel_swipe {
    position: relative;
    width: 518px;
    height: 357px;
    overflow: hidden;
    background-color: #fff;
}

.swipe_list {
    width: 100%;
    height: 100%;
}

.swipe_list li {
    position: absolute;
    width: 100%;
    height: 100%;
}
.swipe_list li a {
    width: 100%;
    height: 100%;
}
.swipe_list li img {
    width: 100%;
    height: 100%;
}

.swipe_dian {
    position: absolute;
    z-index: 90;
    bottom: 0;
    height: 60px;
    text-align: center;
    font-size: 0;
    right: 10px;
}

.swipe_dian span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 26px 5px;
    background-color: #5f5853;
    cursor: pointer;
}

.swipe_dian .active {
    background-color: #ffffff;
}

.swipe_title {
    position: absolute;
    line-height: 60px;
    height: 60px;
    width: 76%;
    z-index: 20;
    text-align: left;
    color: white;
    font-size: 18px;
    margin-left: 10px;
    bottom: 0;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.swipe_bottom {
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: 0;
    background-color: #3a2113;
    opacity: 0.5;
    z-index: 10;
}

.swipe_control {
    position: absolute;
    z-index: 10;
    top: 185px;
    width: 100%;
    height: 30px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.swipe_control .prev,
.swipe_control .next {
    text-align: center;
    line-height: 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #190f0b;
    color: white;
}

.swipe_control .prev:hover {
    color: #cccccc;
    font-weight: bold;
    opacity: 0.7;
}

.swipe_control .next:hover {
    color: #cccccc;
    font-weight: bold;
    opacity: 0.7;
}