Vue中实现轮播图效果的代码怎么写

本文小编为大家详细介绍“Vue中实现轮播图效果的代码怎么写”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue中实现轮播图效果的代码怎么写”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联建站专注于昔阳企业网站建设,成都响应式网站建设公司,成都商城网站开发。昔阳网站建设公司,为昔阳等地区提供建站服务。全流程按需网站策划，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

Vue 过渡

Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。

过渡的实现要在目标元素上使用 transition 属性，具体实现参考Vue2 过渡

下面例子中我们用到列表过渡，可以先学习一下官方的例子

要同时渲染整个列表，比如使用 v-for，我们需要用到组件

Vue 轮播图

我们先看这样一个列表

这个列表要从实例(见文章末尾)中获取了三张图片，要使其中的图片产生轮播，我们需要用组件替换其中的 ul 标签，从而实现过渡组件的功能，完整的组件 DOM 内容如下，下面分段解释一下


  // 轮播图列表
  
   
    
     
    
   
  
  // 轮播图位置指示

data: { slideList: [ { "clickUrl": "#", "desc": "nhwc", "image": "http://dummyimage.com/1745x492/f1d65b" }, { "clickUrl": "#", "desc": "hxrj", "image": "http://dummyimage.com/1745x492/40b7ea" }, { "clickUrl": "#", "desc": "rsdh", "image": "http://dummyimage.com/1745x492/e3c933" } ], currentIndex: 0, timer: '' },

在使用 v-for 时，应给对应的元素绑定一个 key 属性，相当于 index 标识，在组件中，key 是必须的，这样一个轮播图的 DOM 结构就完成了

上面通过 v-for 渲染了 li 列表，并在其中插入了包含可点击跳转的图片，接下来看看如何实现轮播，轮播图的样式直接在后面给出大家 sass 代码，父元素 ul 设置 position: relative;overflow: hidden 后，li 大小设为和父元素相同，absolute 定位固定在父元素中，要让 li 按照顺序显示，需要用到 v-show 或 v-if 处理，通过 index 值来改变当前显示的 li ，本例 v-show 绑定条件 index===currentIndex，用定时器改变 currentIndex 实现轮播

//在下个tick执行等待图片加载完成后再 this.$nextTick(() => { this.timer = setInterval(() => { this.autoPlay() },4000) }), go() { this.timer = setInterval(() => { this.autoPlay() },4000) }, stop() { clearInterval(this.timer) this.timer = null }, change(index) { this.currentIndex = index }, autoPlay() { this.currentIndex++ if (this.currentIndex > this.slideList.length - 1) { this.currentIndex = 0 } }

DOM 中为每个轮播 li 元素绑定事件 @mouseenter="stop" @mouseleave="go" 事件,使轮播鼠标移入时停止，移出时再次开始。

轮播图现在位置指示，绑定类名 active 改变颜色，绑定 change() 方法，鼠标移到指示点时跳转轮播图

.carousel-wrap { position: relative; height: 453px; width: 100%; overflow: hidden; // 删除 background-color: #fff; } .slide-ul { width: 100%; height: 100%; li { position: absolute; width: 100%; height: 100%; img { width: 100%; height: 100%; } } } .carousel-items { position: absolute; z-index: 10; top: 380px; width: 100%; margin: 0 auto; text-align: center; font-size: 0; span { display: inline-block; height: 6px; width: 30px; margin: 0 3px; background-color: #b2b2b2; cursor: pointer; } .active { background-color: $btn-color; } }

.list-enter-active { transition: all 1s ease; transform: translateX(0) } .list-leave-active { transition: all 1s ease; transform: translateX(-100%) } .list-enter { transform: translateX(100%) } .list-leave { transform: translateX(0) }

new Vue({ el: '#carousel', data: { slideList: [ { "clickUrl": "#", "desc": "nhwc", "image": "http://dummyimage.com/1745x492/f1d65b" }, { "clickUrl": "#", "desc": "hxrj", "image": "http://dummyimage.com/1745x492/40b7ea" }, { "clickUrl": "#", "desc": "rsdh", "image": "http://dummyimage.com/1745x492/e3c933" } ], currentIndex: 0, timer: '' }, methods: { this.$nextTick(() => { this.timer = setInterval(() => { this.autoPlay() },4000) }) go() { this.timer = setInterval(() => { this.autoPlay() },4000) }, stop() { clearInterval(this.timer) this.timer = null }, change(index) { this.currentIndex = index }, autoPlay() { this.currentIndex++ if (this.currentIndex > this.slideList.length - 1) { this.currentIndex = 0 } } } })

大橙子网站建设，新征程启航

Vue中实现轮播图效果的代码怎么写

其他资讯