欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue2 轮播图slide组件实例代码

程序员文章站 2023-11-16 11:34:52
vue2原生始轮播图组件,支持宽度自适应、高度设置、轮播时间设置、左右箭头按钮控制,圆点按钮切换,以及箭头、圆点按钮是否显示。

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

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

Vue2 轮播图slide组件实例代码

话不多说直接上源码

轮播图应用页面 \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组件实例代码,希望对大家有所帮助