Vue2 轮播图slide组件实例代码


            Vue2原生始轮播图组件，支持宽度自适应、高度设置、轮播时间设置、左右箭头按钮控制，圆点按钮切换，以及箭头、圆点按钮是否显示。





<v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel>





话不多说直接上源码

轮播图应用页面 \components\public\home.vue





<template>

 <div id="home">

  <v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel>

 </div>

</template>

<script>

 import carousel from "./public/carousel";

 export default {

  name: 'home',

  data() {

   return {

    slideData:[

     {

      title:'这是一个Vue轮播图组件',

      src:require('../assets/pic1.jpg'),

      url:'/show/499'

     },

     {

      title:'这是一个Vue轮播图组件',

      src:require('../assets/pic2.jpg'),

      url:'/show/499'

     },

     {

      title:'这是一个Vue轮播图组件',

      src:require('../assets/pic3.jpg'),

      url:'/show/499'

     },

     {

      title:'这是一个Vue轮播图组件',

      src:require('../assets/pic4.jpg'),

      url:'/show/499'

     },

     {

      title:'这是一个Vue轮播图组件',

      src:require('../assets/pic5.jpg'),

      url:'/show/499'

     },

    ]

   }

  },

  components:{

   'v-carousel': carousel,

  },

  methods: {

  },

  mounted() {

  }

 }

</script>

<style scoped>

</style>



轮播图组件页面 src\components\public\carousel.vue 







<template>

 <div id="carousel">

  <div class="carousel" ref="carousel" v-bind:style="{height:height+'px'}">

   <transition-group tag="ul" class="slide clearfix" :name="transitionName" >

    <li v-for="(item,index) in slideData" :key="index" v-show="index==beginValue" v-bind:style="{height:height+'px'}" >

     <router-link :to="item.url">

      <img :src="item.src">

      <div class="title">{{item.title}}</div>

     </router-link>

    </li>

   </transition-group>

   <div class="up" @click="up" v-show="arrow"></div>

   <div class="next" @click="next" v-show="arrow"></div>

   <div class="slideDot" v-show="dot">

    <span v-for="(item,index) in slideData" :class="{active:index==beginValue}" @click="change(index)" :key="index"></span>

   </div>

  </div>

 </div>

</template>

<script>

 export default {

  name: "carousel",

  data(){

   return{

    setInterval:'',

    beginValue:0,

    transitionName:'slide'

   }

  },

  beforeDestroy() {

   // 组件销毁前,清除监听器

   clearInterval(this.setInterval);

  },

  methods:{

   change(key){

    if(key>(this.slideData.length-1)){

     key=0;

    }

    if(key<0){

     key=this.slideData.length-1;

    }

    this.beginValue=key;

   },

   autoPlay(){

    //console.log(this.$refs.carousel.getBoundingClientRect().width);

    this.transitionName='slide';

    this.beginValue++

    if(this.beginValue>=this.slideData.length){

     this.beginValue=0;

     return;

    }

   },

   play(){

    this.setInterval=setInterval(this.autoPlay,this.interval)

   },

   mouseOver(){ //鼠标进入

    //console.log('over')

    clearInterval(this.setInterval)

   },

   mouseOut(){ //鼠标离开

    //console.log('out')

    this.play()

   },

   up(){ //上一页

    --this.beginValue;

    this.transitionName='slideBack';

    this.change(this.beginValue);

   },

   next(){ //下一页

    ++this.beginValue;

    this.transitionName='slide';

    this.change(this.beginValue);

   }

  },

  mounted(){

   var box = this.$refs.carousel; //监听对象

   box.addEventListener('mouseover',()=>{

    this.mouseOver();

   })

   box.addEventListener('mouseout',()=>{

    this.mouseOut();

   })

   this.beginValue=this.begin;

   this.play();

  },

  props:{

   height:{

    type: Number,

    default: 600

   },

   dot:{

    type: Boolean,

    default: true

   },

   arrow:{

    type: Boolean,

    default: true

   },

   interval:{

    type: Number,

    default: 5000

   },

   begin:{

    type: Number,

    default: 0

   },

   slideData:{

    type: Array,

    default: function () {

     return [];

    }

   }

  }

 }

</script>







<style scoped>

 .slide{position: relative;margin: 0;padding: 0; overflow: hidden;width: 100%; height:450px;}

 .slide li{list-style: none;position: absolute;width: 100%; height:450px;}

 .slide li img{width: 100%; height:450px;cursor:pointer}

 .slide li .title{position: absolute; left:0; bottom: 0; padding: 10px 20px; width: 100%; background: rgba(0,0,0,.35);color: #fff;font-size: larger; text-align: center}

 .slideDot{position: absolute;z-index: 999; bottom: 60px;right:15px; }

 .slideDot span{display: inline-block; width: 30px; height: 7px; background:rgba(255,255,255,.65); margin-left: 5px;}

 .slideDot span.active{background:rgba(255,255,255,1);}

 .up,.next{position: absolute; left:0; top: 50%; margin-top: -32px; cursor: pointer; width:64px;height: 64px;

  background-repeat: no-repeat;

  background-position: 50% 50%;

 }

 .up{background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABSklEQVRoQ9Xa220CMRCF4XMqIB0kdJASSCfpIDWlAzqAElIC6SBUMNFIywsCtB7PjX336v/k3YexTBQ+IvIC4AvAN8mTJYWWRR5rROQdwAGAIk4kt5b3lgCu4rX7l+TbUwBuxJ8B7Ej+tAd4xys47ROKiE8DRMWnACLjwwHR8aGAjPgwQFZ8CCAz3h2QHe8KqIh3A1TFuwAq46cB1fFTgA7xZkCXeBOgU/wwoFv8EKBj/GpA1/gRgJ4e7JaZdWqGtcy9j9asGilFRM9sXpcX/QH4sA7hVQA9wzkC2HRDrNoBjV7+g3aI1YCuiCFAR8QwoBvCBOiEMAO6IKYAHRDTgGqEC6AS4QaoQrgCKhDugGxECCATEQbIQoQCMhDhgGhECiASkQaIQqQCIhDpgDuI57orcQNxJqmXPoafkh24VIqIXvD4BLC3HtP8A6pfGkB3vbyXAAAAAElFTkSuQmCC");}

 .next{left: auto;right:0;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOElEQVRoQ9Xa0W0CQQyEYU9JqShQAXSSEgIdUAIlQAd04milezgdOiHZ4/GGN5C8/N/u060Olvy4+8nMngDuyaVC4whNLUPufjazn+XrEcAls15klgkY/y9HpACj2N3Hrn+vdk+KSAO6ERRAJ4IG6EJQAR0IOkCNKAEoEWUAFaIUoECUA6oREkAlQgaoQkgBFQg5gI1oATARbQAWohXAQLQDsogpABnENIAoYirADuILwGPvxmJGwK+ZHVbB/wfg7tv4K4A15u0gpjmBSPzQTAGIxk8ByMS3A7LxrQBGfBuAFd8CYMbLAex4KaAiXgaoipcAKuPLAdXxpQBFfBlAFV8CUMbTAep4KqAjngboiqcAOuPTgM27EmO9j8+we7cL0d9Tj5QbgDw+fQLLPc54Y+UF4BbdxczcH9Le8DFn39OvAAAAAElFTkSuQmCC");}

 .up:hover{background-color: rgba(0,0,0,.3)}

 .next:hover{background-color: rgba(0,0,0,.3)}

 /*进入过渡生效时的状态*/

 .slide-enter-active{

  transform:translateX(0);

  transition: all 1s ease;

 }

 /*进入开始状态*/

 .slide-enter{

  transform:translateX(-100%);

 }

 /*离开过渡生效时的状态*/

 .slide-leave-active{

  transform:translateX(100%);

  transition: all 1s ease;

 }

 /*离开过渡的开始状态*/

 .slide-leave{

  transform:translateX(0);

 }

 /*进入过渡生效时的状态*/

 .slideBack-enter-active{

  transform:translateX(0);

  transition: all 1s ease;

 }

 /*进入开始状态*/

 .slideBack-enter{

  transform:translateX(100%);

 }

 /*离开过渡生效时的状态*/

 .slideBack-leave-active{

  transform:translateX(-100%);

  transition: all 1s ease;

 }

 /*离开过渡的开始状态*/

 .slideBack-leave{

  transform:translateX(0);

 }

</style>



总结

以上所述是小编给大家介绍的Vue2 轮播图slide组件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！