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实现动态增加文件域表单
Feb 12 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
简单的js计算器实现
Oct 26 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 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 不错的学习资料
2009/02/06 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
python 默认参数问题的陷阱
2016/02/29 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
python取代netcat过程分析
2018/02/10 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
数学专业毕业生自荐信
2013/11/10 职场文书
广告业务员岗位职责
2014/02/06 职场文书
消防先进事迹材料
2014/02/10 职场文书
2014政务公开实施方案
2014/02/19 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python