vue中实现简单轮播效果

原创

于 2018-06-20 15:14:41 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #轮播

本文介绍了如何在Vue.js项目中创建一个简单的轮播效果。通过结合HTML布局、JavaScript控制逻辑以及CSS样式，实现了滑动切换图片的轮播组件。

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

最低0.47元/天解锁文章