vue2中实现js原生轮播图

Vue2 中实现 js 原生轮播图的方法如下：

1. 在 Vue 组件中引入轮播图需要的图片，可以使用 require/import 等方式进行引入。

2. 在 Vue 组件中定义一个变量，用于存储当前轮播图的索引值。

3. 在 Vue 组件的 mounted 钩子函数中，使用 setInterval 函数定时更新当前轮播图的索引值。

4. 在 Vue 组件中使用计算属性或者 watch 监听当前轮播图的索引值，根据索引值切换轮播图。

5. 在 Vue 组件中使用 v-for 指令渲染轮播图列表，并使用 v-bind 绑定图片地址和样式。

下面是一个简单的示例代码：

<template>
  <div class="slider">
    <div class="slider-container" v-bind:style="{ 'transform': 'translateX(' + (-currentIndex * 100) + '%)' }">
      <div class="slider-item" v-for="(item, index) in sliderList" v-bind:key="index">
        <img v-bind:src="item.url" v-bind:alt="item.title">
        <div class="slider-title">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      sliderList: [
        {
          url: require('@/assets/images/slider-1.jpg'),
          title: 'Slider 1'
        },
        {
          url: require('@/assets/images/slider-2.jpg'),
          title: 'Slider 2'
        },
        {
          url: require('@/assets/images/slider-3.jpg'),
          title: 'Slider 3'
        }
      ]
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.sliderList.length
    }, 3000)
  }
}
</script>

<style scoped>
.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider-container {
  width: 300%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slider-item {
  width: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-item img {
  width: 100%;
}

.slider-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  font-size: 14px;
}
</style>

这是一个简单的轮播图组件示例，你可以根据自己的需求进行修改和扩展。