vue组件-轮播（carousel）

最新推荐文章于 2025-05-27 12:38:24 发布

原创最新推荐文章于 2025-05-27 12:38:24 发布 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #轮播 #组件

vue学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Vue.js重构一个jQuery轮播组件。通过VUE轮播在线demo和源码，展示了如何创建一个简单的轮播组件，包括模板设计和组件逻辑。组件模板利用v-for遍历图片数组，绑定click事件，数据逻辑部分则通过props接收图片数据，用curpic记录当前选中图片的序号，并提供select方法进行切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播是web开发中常用的组件，下面使用vue来构建一个简单的轮播组件，主要是从一个jquery轮播重构来的：
VUE轮播在线demo+源码地址：https://codepen.io/shayminsky21/pen/OORQVw
jquery轮播在线地址+源码：https://codepen.io/shayminsky21/pen/XzJgEp

首先是VUE的模板：

<carousel :picdata="pics"></carousel>
 </main>
<script type="text/x-template" id="carousel">
<div id="carousel">
<div v-for="(item,index) in picdata" :class="{'selected': index==curpic, 'next':index==curpic+1, 'nextRightSecond':index==curpic+2,'prev':index==curpic-1,'prevLeftSecond':index==curpic-2,'hideLeft':index<curpic-2,'hideRight':index>curpic+2}"  @click="select(index)"><img v-bind:src="item.src"></div>
</div>

模板非常简单，使用v-for来遍历pics数组里的url，然后将img标签的src设定为对应的图片的url，index则可以记录每张图片所对应的序号，这样就可以根据组简历curpic的值来计算出每个图片对应的class，然后动态渲染。每张图片都绑定click事件，来触发模板的select方法并且将点击图片的index作为参数传入。

接下来是组件的逻辑部分：

Vue.component('carousel', {
template: '#carousel',
   props: {
   picdata: Object
  },
data: function () {
  return { 
        curpic:2,
   }
},
   methods: {
    select: function (index) { 
        this.curpic=index;
   }
     }
})

组件部分的通过props的picdata属性来从父组件中获取到图片的url数据，组件中data里的curpic可以用来设置默认的当前图片序号，并且在之后记录当前选中图片的序号，通过这个数据，组件会为每个图片分配相应的class，然后渲染。
组件目前只有一个方法：select，用来吧curpic设置成为当前选中的图片的序号。

数据输入格式即一个对象数组。记录图片的url。

var pic=[ { src: "https://s16.postimg.org/vklrwoxtx/cover9.jpg"},
          { src: "https://s16.postimg.org/cgsggckzp/cover8.jpg"},
          {src:"https://s16.postimg.org/emmrauog5/cover7.jpg"},
          {src:"https://s16.postimg.org/9drqcz611/cover1.jpg"},
         {src:"https://s16.postimg.org/pnhwfvgp1/cover6.jpg"},
         {src:"https://s16.postimg.org/fij8qay4l/cover3.jpg"}
    ];

大家可以根据这个简单的轮播模板添加自己想要的功能