修改elementUI轮播图鼠标划入轮播暂停的原生效果

最新推荐文章于 2024-12-25 14:24:28 发布
原创 最新推荐文章于 2024-12-25 14:24:28 发布 · 2.7k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #elementui #swipe

本文介绍如何在使用elementUI的Carousel组件时，通过修改鼠标移入事件使轮播图不停止播放。通过直接操作DOM元素并替换原有函数实现自定义行为。
elementUI Carousel 走马灯原生效果：

当鼠标划入轮播图的原生效果会使轮播图停止轮播。

现要求鼠标划入轮播不停止，单单因为这个小需求而用原生JS重构一个轮播图又太浪费。

在node_modules—>element-UI—>packages中查看Carousel源码会发现：源码中加了两个鼠标移入事件。

在这里插入图片描述

如何修改原事件呢？

直接操作轮播组件的DOM元素，将有的函数替换掉就行了：

    <el-carousel ref="carousel" :interval="3000"
最低0.47元/天 解锁文章
走马灯上下滚动，鼠标移入停止滚动
jieweiwujie的博客
05-31 703
走马灯上下滚动，鼠标移入停止滚动
ElementUi Carousel 走马灯，自定义el-carousel箭头左右切换
热门推荐
sunnyboysix的博客
11-29 3万+
一 效果图 需求是我自己要自定义左右切换的箭头图片，每个页面里面显示6组数据。 二 上代码 :autoplay="false" 不需要自动轮播 arrow="never" 不需要自带的箭头 indicator-position="none" 不需要底部的指示器 重点在于 ref=“cardShow”调用方法 <el-carousel :autoplay="false" height="72px" arrow="never" indicator-position="none..
vue 实现无缝向左滚动 鼠标悬停、离开时停止、开始滚动
疑问 搜索 动手 解决 记录
03-23 2512
效果: 可以根据此代码改为轮播 html代码： <template> <div class="announcement"> <div class="cont"> <div class="contlist" ref="contlist" @mouseover="stopScroll" @mouseout="startScroll" > <u
elementplus中Carousel 走马灯不自动轮播
嫒薇笑的博客
12-25 857
结果图片可以正常显示，鼠标点击也能正常切换，但无法自动轮播。怀疑是imgs初始值为空的原因。
Element UI多个走马灯取消鼠标悬停不自动切换
W936438835的博客
12-10 3065
element写轮播图时，鼠标悬停不会停止，需要用到以下核心代码 @mouseenter.native="delHandleMouseEnter" 前情提要：此html代码外面是循环遍历出的div，div数量是后台返回的，而且里面还包含着轮播图，所以有几个div就有几个轮播图，因为是多个轮播图，所以后期需要循环遍历index 具体写法： <div v-show="item.showBannerOrNo" class="block booth-banner"> .
精选资源
Unity3d C#实现UGUI ScrollRect的轮播图效果
07-02
在上述功能上新增了无限轮播、鼠标悬停暂停轮播、鼠标拖拽轮播、竖向轮播等功能。实现的思路是基于UGUI的ScrollRect组件用于滑动效果，而其中的HorizontalLayoutGroup或者VerticalLayoutGroup对Content的内容进行...
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）
10-16
在本文中，我们将探讨如何使用Vue.js和ElementUI库来实现一个点击左右箭头切换头像的功能，这个功能类似于常见的轮播图效果。Vue.js是一个轻量级的前端框架，它提供了组件化开发和响应式数据绑定的能力，而ElementUI...
js实现自动轮播图选项卡效果（光标移入暂停）.pdf
12-16
同时，我们可以使用 `addEventListener` 函数来监听鼠标移入和移出事件，从而暂停或恢复自动轮播图效果。 在 JavaScript 代码中，我们可以使用 `querySelector` 函数来获取容器、图片列表和导航点列表等元素，并...
element Carousel 走马灯切换箭头后鼠标未移出，不自动轮播
weixin_49066399的博客
01-04 1733
用了最简单粗暴的方便给el-carousel-item 标签加上鼠标移入事件。
Element使用之跑马灯
ling_hun_的博客
02-08 2774
今天网页想加个跑马灯组件，美观点 首先先去https://element.eleme.cn找到跑马灯组件 然后找他的用法，我用的是跑马灯垂直方向展示。 将这个用法案例复制到工程文件中，然后在el-carousel-item标签里添加图片。 我是这样添加完后，即可使用，不过图片还不能填充满跑马灯页面，还需改进下。 ...
elementplus轮播图初始空白
Noctis99的博客
10-05 792
v
使用swiper插件时不会自动轮播
LueLueLue77的博客
09-15 2131
引入完成后就会发现已经可以自动轮播了. 这边 EffectFade 是我额外加的淡入淡出的效果😀。最近公司用到了swiper轮播插件，我这边引入的是swiper 8，按照文档。给出的示例代码操作后发现无法自动轮播。
elementUI轮播图异步数据首次不显示解决方法
Madman528的博客
08-07 1270
这个轮播图,异步数据首次是不显示的,要点一下才行,所以要在 数据回来的时候点击一下,先获取组件引用,再用宏任务点击一下,因为宏任务在dom渲染之后。
解决swiper首次加载不轮播的问题
qq_41621896的博客
12-16 5584
解决swiper首次加载不轮播的问题 这两天利用swiper做轮播图遇到了数据动态首次加载成功后轮播图不自动轮播的问题， 查了一些其他的教程说改一下谷歌浏览器的配置就好了，这对程序猿而言很不严谨 初始化的配置的轮播代码如下： 页面代码如下 <swiper ref="mySwiper" :options="swiper_opt_station" @setTransition="setTransition" > <swiper-slide class="swiper-slide"
记录一下 element-plus 中使用 el-carousel 跑马灯 遇到的默认第一张图不显示问题
m0_47668952的博客
12-17 3175
记录一下 element-plus 中使用 el-carousel 跑马灯 遇到的默认第一张图不显示问题
elementui el-carousel轮播图
weixin_43173924的博客
05-05 7820
<el-carousel trigger="click" :autoplay="false" height="500px" @change="handChange" ref="carousel"> <el-carousel-item ...
element ui el-carousel 滚动图 vue 基于vue-lazyload图片懒加载、延迟加载 解决方案
腾讯全栈-ITCJF
11-06 7052
vue-lazyload插件github地址：https://github.com/hilongjw/vue-lazyload#requirements 效果是默认不加载图片，先用一个占位符图来代替，等使用图片的时再进行加载（比如滚动到图片的时候），如果真正的图片请求出错了，用默认的出错图片来进行占位 一、安装插件 $ npm install vue-lazyload --save 二...
Vue3使用element plus轮播图轮播图片(Vite)
qq_59626859的博客
03-23 2073
当使用图片的时候，如果是使用require的话，就会出现require is not defined的报错，这时就会引入vite的new URL 就需要将代码改成这种。
elementui 轮播图鼠标滚动到底部停止
最新发布
07-18
- **`@mouseenter` 和 `@mouseleave` 事件**：这两个事件用于在用户将鼠标移入或移出轮播图区域时暂停或恢复轮播。 ### 注意事项 - 确保为轮播图容器添加了足够的样式以正确显示内容。 - 在组件销毁前移除滚动事件...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值