当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue2 轮播图slide组件实例代码

Vue2 轮播图slide组件实例代码

2019年06月04日  | 移动技术网IT编程  | 我要评论

咬着包子蹲马桶,天缘传奇,雨季

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组件实例代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网