VUE中用原生js实现轮播图效果

于 2024-03-29 01:14:39 发布
阅读量624 收藏 19
点赞数 22
分类专栏： 程序员 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83916204/article/details/137128975
版权
本文展示了如何在Vue应用中利用JavaScript实现一个轮播图效果。通过处理产品列表的数据，动态添加空对象以填充数组，然后设置定时器进行轮播，实现了平滑的图片切换动画。此外，作者分享了个人的前端开发经验和学习资源，强调了日常积累和面试准备的重要性。
摘要由CSDN通过智能技术生成

JS部分：

export default {

name: ‘Home’,

data () {

return {

productList: [

{

ProductName: ‘ET-NBAC-I’,

Description: ‘ET-NBAC-I三相不平衡智能调控系统是一种智能实时调控装置，…’,

picSrc: require(‘…/assets/images/ET-NBAC-I.png’),

picWidth: ‘80px’

},

{

ProductName: ‘ET-NBAC-II’,

Description: ‘ET-NBAC-II三相不平衡智能调控系统是一种智能实时调控装置…’,

picSrc: require(‘…/assets/images/ET-NBAC-II.png’),

picWidth: ‘80px’

},

{

ProductName: ‘ET-TSC++’,

Description: ‘ET-TSC++超快速电容器综合模块，具有速度快、容量大、寿命长…’,

picSrc: require(‘…/assets/images/ET-TSC++.png’),

picWidth: ‘80px’

},

{

ProductName: ‘ET-D(S)VS’,

Description: ‘末端电压稳定装置是一种跟踪末端线路电压变化、自…’,

picSrc: require(‘…/assets/images/ET-D(S)VS.png’),

picWidth: ‘80px’

},

{

ProductName: ‘在线监测系统’,

Description: ‘电能质量在线监测系统是面向对象的大型电能质量在线监测与管理系统。…’,

picSrc: require(‘…/assets/images/在线监测系统.png’),

picWidth: ‘80px’

},

{

ProductName: ‘PQ2000’,

Description: ‘PQ2000电能质量分析仪是北斗易通结合我国电力系统的特点，采用…’,

最低0.47元/天 解锁文章
2401_83916204
关注
专栏目录
利用vueJs实现图片轮播
南宫凌萱的博客
06-02 1万+
最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播，便做个简单的记录 以下只贴出carousel.vue代码，其他的省略 左移 右移 const
轮播图（vue.js）
qq_42850073的博客
02-17 1139
仅供初学者学习vue思想 1.原理： v-on:click=“prev” v-on用来绑定事件 v-if=" 条件 " v-if来控制a这个dom是否存在（显示），性能消耗较大； v-show=" 条件 " v-show来控制元素的display属性 v-bind:src="" 通过vue实现轮播图与js实现相比较，vue只是通过v-show=“index！=0”和v-show=“index<imgArr.length-1”来控制左右箭头的显示隐藏，简化了js对DOM的繁琐操作； 2.代
vue实现轮播图详解
最新发布
蓑笠翁
10-04 1万+
vue实现轮播图效果，vant使用轮播图效果，实现图片轮播效果详解。
vue,原生轮播图（无缝轮播图）
qq_41893686的博客
11-04 578
效果图 <template> <div> <div class="swiper"> <ul ref="swiper" class="swipero"> <li v-for="(item, index) in items" :key="index"> <div v-text="item.name"></div> </li> .
Vue 实现轮播图功能
热门推荐
it_xushixiong的博客
05-15 2万+
Vue 是一款流行的前端框架，它提供了一系列的工具和组件，使得开发者可以更加便捷地创建交互式的 Web 应用程序。轮播图是 Web 应用程序中常见的一种交互式组件，可以用来展示图片、新闻、广告等内容。在 Vue 中，我们可以使用第三方组件库或自己编写代码来实现轮播图功能。本文将介绍如何使用 Vue 和第三方组件库 Element UI 实现轮播图功能。
纯VUE实现手写轮播图
weixin_48386494的博客
11-03 2898
使用VUE也有一段时间了，今天在工作过程中用VUE手写了一个简单的VUE轮播图，在这里分享一下。 （一）实现思路： 和原生JS的实现思路一样只不过是代码展现方式有所不同，同样是给外侧父盒子限定宽度和高度，之后添加overflow: hidden;属性。然后在内部展示轮播内容，利用transition以及transfrom实现轮播。 （二）效果图 （三）代码 <template> ...
vue做混合式app_Vue+原生App混合开发手记#1
weixin_39832448的博客
12-29 335
项目的大致需求就是做一个App，里面集成各种功能供用户使用，其中涉及到很多Vue的使用方法，单独总结太麻烦，所以通过这几篇笔记来梳理一下。原型图如下：路由配置主界面会用到一些原生App方法，比如验证用户身份等，故由原生App完成，进去的每个模块则全部都是HTML页面(有一种后端工作好轻松的感觉￣へ￣)。由于传统的HTML页面开发起来效率太低，所以我选择了Vue来实现。每一个功能对应一个路由，比如电...
vue做混合式app_【转载】Vue+原生App混合开发
weixin_39628339的博客
12-19 598
项目的大致需求就是做一个App，里面集成各种功能供用户使用，其中涉及到很多Vue的使用方法，单独总结太麻烦，所以通过这几篇笔记来梳理一下。原型图如下：路由配置主界面会用到一些原生App方法，比如验证用户身份等，故由原生App完成，进去的每个模块则全部都是HTML页面(有一种后端工作好轻松的感觉￣へ￣)。由于传统的HTML页面开发起来效率太低，所以我选择了Vue来实现。每一个功能对应一个路由，比如电...
vue，小程序，html，js 60道常见面试题
l_ymttt的博客
10-12 747
1.什么是vue vue 是一个以数据驱动视图的渐进式 mvvm 模式框架 2.vue指令？v-if v-show ；v-html v-text区别 v-for，v-model，v-bind，v-on， v-once； v-if控制的是元素的加载与销毁，v-show控制元素的display样式； v-html可以渲染dom片段，v-text只能渲染文本 3.vue组件通信 1.父传子：父组件用v-bind绑定自定义属性将数据传给子组件件，子组件props接收 2.子传父：父组件用v-on绑定自定义事件将函数
VueJS轮播图插件Vueslideshow.zip
07-11
基于 VueJS 的轮播图插件 Vueslideshow
Vue.js轮播图demo
05-31
一个vue.js做的轮播图小demo，可根据自身需要进行添加修改删除
vue.js实现简单轮播图效果
01-21
学习了vue.js也有一段时间了，做了个小demo来熟悉一下，很常见的demo，——-轮播图，没学vue之前的轮播图用JavaScript或者jquery都非常简单，发现用vue来写也挺有意思的。说下简单的思路，图片的轮播用v-if或者v-show来代替原来的Js滑动，过度效果用transition可简单实现，注意，滑动过程中是能看见两张图的，所以要用两个transition。 （1）先写出整体的框架 <template> <div class=slide-show> <div class=slide-img> <transition name=slide-trans> <im
vue原生js轮播图组件.rar
11-29
vue原生js轮播图组件,轮播图我一开始是写成非插件形式实现的效果，后来才改成了封装成插件的形式。纯js实现，引入到项目中，直接调用组件即可使用，方便快捷
vue.js轮播图插件
12-07
一个很不错的支持vue.js的轮播图插件
vue中图片轮播
weixin_66619918的博客
03-01 5834
vue中轮播图的实现 轮播图中html结构一般由主体图片、下方小圆圈、上一张和下一张组成。 主体图片能够实现两秒切换一次，并且对应的小圆圈被选中 点击上一张和下一张按钮切换相应图片，同时小圆圈产生变化。 点击小圆圈切换图片 鼠标放在图片主体上停止轮播，鼠标离开主体图片开始轮播。 html结构 <div class="container"> <div class="lunbo" @mouseenter="clear" @mouseleave="run"> /.
原生vue实现简单的轮播图
qq_45030966的博客
10-05 580
实质：通过左右按钮实现图片的上下切换，先将图片地址存储在数组中，然后利用索引实现的图片的切换，和之前用JavaScript实现轮播图的原理一样， https://blog.csdn.net/qq_45030966/article/details/120145990 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv
Vue3原生写轮播图组件
weixin_48837605的博客
09-15 1536
实现的基本功能: 自动播放，暴露自动轮播属性，设置了就自动轮播 如果有自动播放，鼠标进入离开，暂停，开启 指示器切换，上一张，下一张 销毁组件，清理定时器 步骤: 1.实现通用轮播图样式的基本布局 2.设置为全局组件 3.设置业务组件 4.业务组件导入到首页当中(home.vue) 1)在src/components/library/Carousel.vue(这是轮播图的通用组件基本构建,全局注册) <template> <div c.
Vue自定义js实现图片碎片轮播效果及代码详解
在本文档中，我们探讨了如何在Vue应用中实现一个自定义的JavaScript图片碎片轮播图切换效果。首先，开发者定义了一个名为`FragmentBanner`的类，用于构建轮播组件。这个类接受一个`option`对象作为参数，其中包含了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值