Vue2 轮播图slide组件实例代码


Posted in Javascript onMay 31, 2018

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组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 #Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 #Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 #Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 #Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
Vue2.0 实现移动端图片上传功能
May 30 #Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP源码之explode使用说明
2011/08/05 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
js 验证身份证信息有效性
2014/03/28 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
讲解Python中的标识运算符
2015/05/14 Python
Python中的getopt函数使用详解
2015/07/28 Python
Python对数据库操作
2016/03/28 Python
python中map()函数的使用方法示例
2017/09/29 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
python dataframe NaN处理方式
2019/12/26 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
任意存:BOXFUL
2018/05/21 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
申论倡议书范文
2014/05/13 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
体育运动会广播稿
2014/10/05 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
大雁塔英文导游词
2015/02/10 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书