vue3实现简单轮播图

最新推荐文章于 2024-09-06 13:55:54 发布
最新推荐文章于 2024-09-06 13:55:54 发布
阅读量6.8k 收藏 6
点赞数 1
文章标签： html javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64550674/article/details/123294035
版权

 app挂载

创建swiper组件

<div id="app">
			<swiper :gallery="gallery" style="width:100%"></swiper>
			
</div>

css部分

 

	<style type="text/css">
			.swiper {
				position: relative;
			}

			.prev {
				position: absolute;
				left: 10px;
				top: 50%;
				transform: translateY(-50%);
				color: #ccc;
				font-size: 35px;
			}
			.next{
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
				color: #ccc;
				font-size: 35px;
			}
			.dot {
				width: 100px;
				height: 20px;
				border-radius: 10px;
				background-color: rgba(0,0,0,0.5);
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			
			.dot-con {
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background-color: #fff;
			}
			.on{
				background-color: #F05B1A;
			}
			.prev,
			.next{
				cursor: pointer;
			}
		</style>

js部分

<script>
			const swiper = {
				template: `
			<div class="swiper" @mouseover="stop()" @mouseout="play()">\
			<span class="prev"  @click="current-- ;check()"><</span>
				<div class="swiper-item" v-for="(item,index) in gallery" v-show="index===current">
				<img :src="item" style="width:100%">
				</div>
				<span class="next" @click="current++ ;check()">></span>
				<div class="dot">
					<div class="dot-con" v-for="(item,index) in gallery" :class="index===current?'on':''"></div>
				</div>
			</div>`,
				props: {
					gallery: {
						type: Array,
						default: function() {
							return []
						}
					},
					interval: {
						type: Number,
						default: 2000
					}
				},

				data() {
					return {
						current: 0,
						interId: null,
					}
				},

				methods: {
					play() {
						this.interId = setInterval(() => {
							this.current++
							this.check()
						}, this.interval)
					},
					stop() {
						clearInterval(this.interId)
					},
					check() {
						if (this.current >= this.gallery.length) {
							this.current = 0
						}
						if (this.current < 0) {
							this.current = this.gallery.length - 1
						}
					}

				},
				created() {
					this.play()
				}
			}



			Vue.createApp({
				components: {
					swiper
				},
				data() {
					return {
						gallery: [
							"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
							"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/222d6c61df75f30e6782ec476d5c8273.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
							"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dd741adcce9417d72ea4c1a6dfcc96e2.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
							"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/39bb34167f6c178d6bb768d8872c97f8.jpg?w=2452&h=920"
						]
					}
				}
			}).mount("#app")
		</script>

 完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>幻灯片</title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			.swiper {
				position: relative;
			}

			.prev {
				position: absolute;
				left: 10px;
				top: 50%;
				transform: translateY(-50%);
				color: #ccc;
				font-size: 35px;
			}
			.next{
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translateY(-50%);
				color: #ccc;
				font-size: 35px;
			}
			.dot {
				width: 100px;
				height: 20px;
				border-radius: 10px;
				background-color: rgba(0,0,0,0.5);
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			
			.dot-con {
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background-color: #fff;
			}
			.on{
				background-color: #F05B1A;
			}
			.prev,
			.next{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<swiper :gallery="gallery" style="width:100%"></swiper>
			
		</div>
		<script>
			const swiper = {
				template: `
			<div class="swiper" @mouseover="stop()" @mouseout="play()">\
			<span class="prev"  @click="current-- ;check()"><</span>
				<div class="swiper-item" v-for="(item,index) in gallery" v-show="index===current">
				<img :src="item" style="width:100%">
				</div>
				<span class="next" @click="current++ ;check()">></span>
				<div class="dot">
					<div class="dot-con" v-for="(item,index) in gallery" :class="index===current?'on':''"></div>
				</div>
			</div>`,
				props: {
					gallery: {
						type: Array,
						default: function() {
							return []
						}
					},
					interval: {
						type: Number,
						default: 2000
					}
				},

				data() {
					return {
						current: 0,
						interId: null,
					}
				},

				methods: {
					play() {
						this.interId = setInterval(() => {
							this.current++
							this.check()
						}, this.interval)
					},
					stop() {
						clearInterval(this.interId)
					},
					check() {
						if (this.current >= this.gallery.length) {
							this.current = 0
						}
						if (this.current < 0) {
							this.current = this.gallery.length - 1
						}
					}

				},
				created() {
					this.play()
				}
			}



			Vue.createApp({
				components: {
					swiper
				},
				data() {
					return {
						gallery: [
							"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
							"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/222d6c61df75f30e6782ec476d5c8273.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
							"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dd741adcce9417d72ea4c1a6dfcc96e2.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
							"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/39bb34167f6c178d6bb768d8872c97f8.jpg?w=2452&h=920"
						]
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

 

洋芋坨坨！
关注
Vue 实现商品详情多播图(点击图片列表轮播图)
LONGYog的博客
04-22 7729
Vue 实现商品详情多播图(点击轮播图) 之前弄商城项目有要到这种效果的商品展示图(商品图片轮播)，找了很久没找到，就自己写了一个。 实现效果： 点击左右按钮图片左右移动 点击小图片图片展示到大图 图片移动到最后直接回滚到第一张 直接上图： HTML代码： <template> <div> <div style="width:800px;height:800px;margin:20px 0 0 700px;"> &lt
vue实现简单轮播图
热门推荐
qq_42312396的博客
03-15 2万+
做了一个轮播图，可以自动切换，鼠标放上去后停止，左右切换是用element ui加上去的，箭头间距不一样有点难受，之后再吧。记录一下。 下面是html的图和按钮部分 v-for中必须要写index作为:key的值。button应该卸载img后面，写在前面的会被img遮住，加个z-index:1，调高图层就可以了。 <div v-for="(img_url, index) in img_src" :key="index" v-s
使用Vue3实现轮播图
a1357000424的博客
05-10 6611
使用轮播组件实现图片轮播效果
Element Plus（Vue 3 版本）来实现图片轮播
最新发布
weixin_73060959的博客
09-06 810
使用 Element Plus（Element UI 的 Vue 3 版本）来实现图片轮播，你可以利用 Element Plus 提供的组件。这个组件提供了一个方便的接口来展示轮播图，包括切换箭头、指示器（小圆点）等。以下是一个基本的示例，展示如何使用 Element Plus 的。
基于Vue3的Web端自定义轮播图动画效果（完整版保姆级教程，附源码）
weixin_52231116的博客
05-20 4025
本文主要基于vue3制作web端自定义轮播图，以及添加相应的动画（完整版保姆级教程，附源码）
使用vue3写轮播图
m0_46896340的博客
07-08 1424
使用Vue3写轮播图
vue3使用swiper实现轮播图
weixin_60899185的博客
03-21 4137
vue3使用swiper实现简单轮播
vue.js实现简单轮播图效果
01-21
学习了vue.js也有一段时间了，做了个小demo来熟悉一下，很常见的demo，——-轮播图，没学vue之前的轮播图用JavaScript或者jquery都非常简单，发现用vue来写也挺有意思的。说下简单的思路，图片的轮播用v-if或者v-...
利用Vue实现移动端图片轮播组件的方法实例
08-29
在前端开发中，轮播图是一种常见的网页效果，用于展示多张图片或内容。本文将详细介绍如何使用Vue.js实现一个轻量级的移动端图片轮播组件。Vue.js是一款流行的JavaScript框架，它允许开发者构建可复用、可维护的组件...
Vue3 使用轮播图
qq_29744347的博客
05-07 3295
文章目录前言安装组件基础用法自动播放分页无限循环前进后退按钮切换效果示例 前言 这里使用swiper 官网地址：https://swiperjs.com/vue 中文网地址：https://www.swiper.com.cn（提供了参数搜索） 下面简单说说几种简单的使用 基本可以满足项目需求 如果需要复杂的效果，请去查看官方文档 安装组件 npm install swiper 基础用法 从包里引入 Swiper,SwiperSlide 组件 引入swiper的css样式 图片放 SwiperSlid
【Vue3.0 案例】轮播图（支持手动配置的组件化轮播图）
马云
01-06 3795
文章目录案例效果轮播图案例描述注册并导入组件库index.js（注册组件库）main.js （导入组件库）静态资源组件逻辑index.vueItem.vueDot.vueDirector.vue使用组件home.vue 案例效果 轮播图 案例描述 支持手动配置的组件化轮播图~ 1.自动轮播 2.点击小圆点切换 3.点击指示器切换 4.可以分别配置 轮播图配置项： <carousel :autoplay='true' 自动轮播 :duration='2000' 持续时间
vue3 图片左右无限滚动-轮播功能_vue3 轮播
2401_85123689的博客
06-19 319
->
Vue3.0组件—banner轮播图（渐入渐隐效果）
前端菜鸟
09-19 5330
①组件图片切换有三种方式，第一种是图片两边按钮切换，第二种是点击图片下方小横条切换，第三种是自动切换；②子组件props的属性：listBanner（播放的图片源）、interval（图片播放的间隔时间）、 autoSwitc（是否自动播放banner）、 setHeight（banner的高度）；③给切换图片的标签添加ref，改变ref属性中的opacity，切换透明度，达到图片渐隐渐显的效果，再给对应标签样式中添加`transition-duration: 1.5（片透明度切换的时间）
vue3封装轮播图组件
qq_59737146的博客
08-25 3259
vue3封装轮播图组件
Vue3原生写轮播图组件
weixin_48837605的博客
09-15 1578
实现的基本功能: 自动播放，暴露自动轮播属性，设置了就自动轮播 如果有自动播放，鼠标进入离开，暂停，开启 指示器切换，上一张，下一张 销毁组件，清理定时器 步骤: 1.实现通用轮播图样式的基本布局 2.设置为全局组件 3.设置业务组件 4.业务组件导入到首页当中(home.vue) 1)在src/components/library/Carousel.vue(这是轮播图的通用组件基本构建,全局注册) <template> <div c.
vue3版本的手动轮播图
js 延时弹框
07-18 377
vue3 版 手动基础轮播图
vue3项目实战-轮播图实现，页面组件封装，图片懒加载，组件封装，使用逻辑函数拆分业务
m0_62300955的博客
02-07 1994
轮播图实现，页面组件封装，图片懒加载，组件封装，使用逻辑函数拆分业务
Vue2.0实现简单轮播图教程
"基于vue2.0实现简单轮播图" 在本文中，我们将探讨如何使用Vue2.0框架来创建一个基本的轮播图组件。轮播图是网页设计中常见的一种展示多张图片或内容的方式，通常具有自动切换、鼠标悬停暂停以及手动控制等功能。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值