elelement-plus的Carousel 走马灯鼠标滑动

<template>
	<div>
		<el-carousel height="350px" ref="carousel" :autoplay="autoplay">
			<el-carousel-item v-for="item in 4" :key="item" @mousedown="mousedown" :style="autoplay?'':'transition: none;'" class="p-20">
				<img  src="../assets/images/swiper1.png" style="user-select: none;" draggable="false"> <!-- draggable=false为图片不能拖动 -->
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				autoplay: true,//是否自动播放(同时可以表示为是否为不按下鼠标)
				countX: 0,
			};
		},
		mounted() {
			//添加全局的鼠标滑动鼠标左键抬起
			document.addEventListener("mouseup", this.mouseup)
			document.addEventListener("mousemove", this.mousemove)
		},
		methods: {
			mousedown() {
				//鼠标按下时暂停自动轮播,同时清除移动距离
				this.autoplay = false
				this.countX = 0
			},
			mousemove(e) {
				//判断是不是鼠标按下状态
				if (this.autoplay) return
				if (this.autoplay) return
				//获取全部的轮播图子项
				let list = document.querySelectorAll(".el-carousel__item")
				this.countX += e.movementX
				for (let i = 0; i < list.length; i++) {
					//使每一项偏离鼠标移动的距离
					list[i].style.transform =
						`translateX(${parseInt(list[i].style.transform.replace('translateX(',""))+e.movementX}px) scale(1)`
				}
			},
			mouseup() {
				//判断是不是鼠标按下状态
				if (this.autoplay) return
				this.autoplay = true
				//如果向右边移动超过100就切换上一张
				if (this.countX >= 100) {
					this.$refs.carousel.prev()
				} else if (this.countX <= -100) { //如果向左边移动超过100就切换下一张
					this.$refs.carousel.next()
				} else {
					//否则回到当前
					this.$refs.carousel.prev()
					this.$refs.carousel.next()
				}
			},
		}
	};
</script>

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用中提到的,使用element-plus的el-carousel组件来放置滚动广告时,可以通过设置type="card"来实现效果。至于走马灯图片的大小,文档中并没有具体说明。 根据引用中的解决方法,可以为carousel组件添加显示条件list.length > 0,只有当list不为null且长度大于0时才会渲染元素。这意味着走马灯图片的大小可能取决于绑定给el-carousel的数据list中的元素数量和大小。 引用中提到,el-carousel绑定的数据需要一个初始值。如果初始值为空数组([]),可能会出现异常。所以可以通过为初始值提供一些图片元素,比如var bannerList = ref([1, 2, 3]),来确保开始时就有一些图片展示在走马灯中,从而确定走马灯的图片大小。 综上所述,element-plus carousel走马灯的图片大小是由绑定给el-carousel的数据中的图片元素数量和大小决定的。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [element-plus 之el-carousel 走马灯 加载图片刚进入的时候为什么数据显示不对?](https://blog.csdn.net/weixin_43136717/article/details/128233256)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue3 + Element-Plus carousel走马灯 显示动态数据时 默认会显示一个空白元素](https://blog.csdn.net/qq_40007006/article/details/120440831)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值