vue中实现简单轮播效果

关注

VIP免费原创 2018-06-20 15:14:41 3.2k 阅读 AI 写同款· GEO 优化 ›

html：

<div class="cate-main">
					<div class="carousel-contain">
			<--图片部分-->		<ul class="carousel-wrap transition">
							<li class="carousel-slide">
								<img src="../assets/images/category/banner1.png" alt="图1">
							</li>
							<li class="carousel-slide">
								<img src="../assets/images/category/banner2.png" alt="图2">
							</li>
							<li class="carousel-slide">
								<img src="../assets/images/category/banner3.png" alt="图3">
							</li>
							<li class="carousel-slide">
								<img src="../assets/images/category/banner1.png" alt="图1">
							</li>
						</ul>
			<--切换按钮部分-->	<p class="carousel-button-wrap">
							<span class="carousel-button-slide" :class="{active: activeIndex == 0 || activeIndex == 3}" @click="switchPic (0)"></span>
							<span class="carousel-button-slide" :class