vue中transition标签实现轮播图及ScreenToGif动图生成器

页面中想插入一个轮播图，本来想直接找一个现成，结果发现大佬们的代码都特别复杂，而且大部分都是直接用的better-scroll,放到我的页面上效果都不是很好，所以没有办法，本菜鸡就直接写了一个小白也能看懂可以直接调用的轮播图啦~

首先说一下实现的功能：图片的无缝轮播，鼠标移入停止，移出继续以及底部的导航条
效果：
好啦废话不多说直接上代码啦：

<template>
	<div id="swiper">
		<!--轮播图展示区域-->
		<div class="slide-img" @mouseover="stop" @mouseleave="autoplay">
			<!--使用vue中的transition实现图片的无缝滑动效果-->
			<transition name="show">
				<div class="slide" v-for="(item,index) in imgs" :key="index" v-if="mark === index">
					<img :src="item" />
				</div>
			</transition>
		</div>

		<!--底部导航条部分(不需要可以删除)-->
		<!-- 上一页 -->
		<ul class="slide-page">
			<li @click="sub">&lt;</li>
			<li v-for="(item,index) in imgs" @click="goto(index)">
				<a :class="{red:mark===index}">{
   {
    index + 1 }}</a>
			</li>
			<!-- 下一页 --&g