Vue.js轮播图走马灯代码实例（全）

话不多说先上效果图，本文引荐链接https://www.jb51.net/article/129112.htm

这个是html,

<template>
 <div>
  <div class="back_add">
   <div class="threeImg">
    <div class="Containt">
     <div class="iconleft" @click="zuohua">
      <i class="el-icon-arrow-left"></i>
     </div>
     <ul :style="{'left':calleft + 'px'}" v-on:mouseover="stopmove()" v-on:mouseout="move()">
      <li v-for="(item,index) in superurl" :key="index">
       <img :src="item.img"/>
      </li>
     </ul>
     <div class="iconright" @click="youhua">
      <i class="el-icon-arrow-right" ></i>
     </div>
    </div>
   </div>
  </div>
 </div>
</template>

数据中我用了一个数组来放图片的目录，

data() {
  return {
   superurl: [
    {
     url: '',
     img: '../../../../static/image/home/pictureA.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/pictureB.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/pictureC.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/pictureD.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/showImg1.png',
    },
    {
     url: '',
     img: '../../../../static/image/home/showImg2.png',
    },
   ],
   calleft:0
  }

 方法是这样的

created() {
  this.move()
 },
 methods: {
  //移动
  move() {
   this.timer = setInterval(this.starmove, 2500)
  },
  //开始移动
  starmove() {
   this.calleft -= 340;
   if (this.calleft < -1200) {
    this.calleft = 0
   }
  },
  //鼠标悬停时停止移动
  stopmove() {
   clearInterval(this.timer)
  },
  //点击按钮左移
  zuohua() {
   this.calleft -= 340;
   if (this.calleft < -1200) {
    this.calleft = 0
   }
  },
  //点击按钮右移
  youhua() {
   this.calleft += 340;
   if (this.calleft > 0) {
    this.calleft = -1020
   }
  },
 },

因为我们只有静态的图片所以这么可以，但是如果是取数据库中不定数量的图片就不能这么使用了

最后我加上了css样式就可以了

<style scoped>
/*超链接图片*/
#divAdd {
 background-color: #ededed;								 
 1/3    1 2 3 下一页 尾页