[关闭]
@15013890200 2018-08-13T16:08:30.000000Z 字数 5467 阅读 825

vue craousel 轮播插件

vue javascript 插件

1 插件部分

1.1 template部分

  1. <template>
  2.     <div class="j_div_carousel" v-if="data.length">
  3.         <!-- 左右轮播 -->
  4.         <div class="j_div_imgs" @mouseover="show_arrow = true" @mouseout="show_arrow = false" v-if='animate == "left"'>
  5.             <div class="j_div_img_show" :style="{left:left}">
  6.                 <img class="j_carousel_img" @click="turn_page(d.url)" v-for="d in data" :src="d.src" width="100%" height="100%">
  7.             </div>
  8.             <div class="j_div_radios" v-if="banner">
  9.                 <span :title="a.name" @click='select(key)' class="j_sp_radio" :class="{'j_sp_radio_selected':key == index}" v-for="(a,key) in data"></span>
  10.             </div>
  11.             <div class="j_div_arrow" v-if="arrow && show_arrow">
  12.                 <span @click="turn_img(-1)" class="j_left_arrow" v-if='index > 0'><</span>
  13.                 <span @click="turn_img(1)" class="j_right_arrow" v-if='index < data.length-1'>></span>
  14.             </div>
  15.         </div>
  17.         <!-- 渐隐渐现 -->
  18.         <div class="j_div_imgs" @mouseover="show_arrow = true" @mouseout="show_arrow = false" v-if='animate == "disappear"'>
  19.             <img class="j_carousel_img j_dis_img" @click="turn_page(d.url)" v-for="(d,key) in data" :src="d.src" width="100%" height="100%" :style="{opacity: key == index ? 1:0}">
  20.             <div class="j_div_radios" v-if="banner">
  21.                 <span :title="a.name" @click='select(key)' class="j_sp_radio" :class="{'j_sp_radio_selected':key == index}" v-for="(a,key) in data"></span>
  22.             </div>
  23.             <div class="j_div_arrow" v-if="arrow && show_arrow">
  24.                 <span @click="turn_img(-1)" class="j_left_arrow" v-if='index > 0'><</span>
  25.                 <span @click="turn_img(1)" class="j_right_arrow" v-if='index < data.length-1'>></span>
  26.             </div>
  27.         </div>
  29.         <!-- 上下轮播 -->
  30.         <div class="j_div_imgs2" @mouseover="show_arrow = true" @mouseout="show_arrow = false" v-if='animate == "vertical"'>
  31.             <div class="j_div_img_show" style="transition: top 0.5s;" :style="{top:(-height*index)+'px'}">
  32.                 <img class="j_carousel_img" @click="turn_page(d.url)" v-for="d in data" :src="d.src" width="100%" height="100%">
  33.             </div>
  34.             <div class="j_div_radios" v-if="banner">
  35.                 <span :title="a.name" @click='select(key)' class="j_sp_radio" :class="{'j_sp_radio_selected':key == index}" v-for="(a,key) in data"></span>
  36.             </div>
  37.             <div class="j_div_arrow" v-if="arrow && show_arrow">
  38.                 <span @click="turn_img(-1)" class="j_left_arrow" v-if='index > 0'><</span>
  39.                 <span @click="turn_img(1)" class="j_right_arrow" v-if='index < data.length-1'>></span>
  40.             </div>
  41.         </div>
  42.     </div>
  43. </template>

Tips:轮播动画不同其实只影响包含图片那层div，和其他部分无关，仔细看template部分可以发现

1.2 script部分

  1. <script>
  2.     export default {
  3.         name: 'mycarousel',
  4.         data(){
  5.             return{
  6.                 data: null,//轮播图片对象数组
  7.                 animate: 'left',//轮播动画选择 left disappear vertical
  8.                 click: true,//图片是否支持点击跳转
  9.                 banner: true,//是否显示底banner
  10.                 banner_click: true,//banner圆点是否支持点击
  11.                 arrow: true,//是否显示左右切换箭头
  12.                 left: 0,//animate 为left 时候，用于计算style left值
  13.                 index: 0,// 记录当前轮播到的图片的数组索引，非id
  14.                 t_out: null,//记录定时任务，当有人为切换播放顺序时，为了避免播放混乱，即清除原定时任务，再重新开始
  15.                 time: 3,//图片切换间隔时长
  16.                 show_arrow: false,//记录左右切换箭头是否显示
  17.                 width: 200,//记录轮播图的宽度
  18.                 height: 150//记录轮播图的高度
  20.             }
  21.         },
  22.         props: {
  23.             carouselObj: {
  24.                 type: Object,
  25.                 default: null
  26.             }
  27.         },
  28.         methods: {
  29.             start_carousel: function(){
  30.                 /* 定时轮播任务 */
  31.                 let t = this;
  32.                 this.t_out = setTimeout(function(){
  33.                     setTimeout(function(){
  34.                         if(t.index > t.data.length-2){
  35.                             t.index = 0;
  36.                         }
  37.                         else{
  38.                             t.index++;
  39.                         }
  40.                         if(t.animate === 'left'){
  41.                             t.left = -t.index*t.width + 'px';
  42.                         }
  43.                         else if(t.animate === 'vertical'){
  45.                         }
  46.                         t.start_carousel();
  47.                     })      
  48.                 },t.time*1000);
  49.             },
  50.             select: function(index){
  51.                 /* 人为选择轮播索引 */
  52.                 if(!this.banner_click)return;
  53.                 this.index = index;
  54.                 this.left = -index*this.width + 'px';
  55.                 clearTimeout(this.t_out);   
  56.                 this.start_carousel();      
  57.             },
  58.             turn_img: function(num){
  59.                 /* 切换左右箭头 */
  60.                 this.index = this.index + num;
  61.                 this.left = -this.index*this.width + 'px';
  62.                 clearTimeout(this.t_out);   
  63.                 this.start_carousel();
  64.             },
  65.             turn_page: function(url){
  66.                 /* 点击图片，触发跳转事件 */
  67.                 if(!this.click)return;
  68.                 window.open("//"+url);
  69.             }
  70.         },
  71.         mounted(){
  72.             this.start_carousel();
  73.             this.width = this.$el.offsetWidth-2;
  74. 			this.height = this.$el.offsetHeight -2 ;
  75.         },
  76.         beforeMount(){
  77.             /* 将传入对象的各属性赋值给轮播数据 */
  78.             if(this.carouselObj){
  79.                 for(let key in this.carouselObj){
  80.                     this.$data[key] = this.carouselObj[key];
  81. 				}
  82. 			}
  83. 		},
  84. 		watch: {
  85. 			/* 当轮播对象 在切换图片的时候需要有返回函数时返回 */
  86. 			'index': function(){
  87. 				this.$emit('callback',this.index);
  88.             }
  89.         }
  90.     }
  91. </script>

1.3 css部分

  1. <style scoped>
  2.     .j_div_carousel{width: 100%;height: 100%;border: 1px solid #ddd;}
  3.     .j_div_imgs{width:100%;height:100%;position:relative;overflow:hidden;white-space:nowrap;}
  4.     .j_div_imgs2{width:100%;height:100%;position:relative;overflow:hidden;line-height:0;}
  5.     .j_div_img_show{width:100%;height:100%;position:absolute;left:0;transition:left 0.5s;}
  6.     .j_div_radios{position:absolute;bottom:0;left:0;background:#000;opacity:0.5;height:30px;width:100%;text-align:center;line-height:30px;}
  7.     .j_sp_radio{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#666;margin-left:5px;cursor:pointer;position:relative;}
  8.     .j_sp_radio_selected{background-color:#fff;width:9px;height:9px;}
  9.     .j_div_arrow{position:absolute;top:40%;left:0;width:100%;height:0;}
  10.     .j_left_arrow{width:25px;height:25px;border-radius:50%;background-color:#000;color:#fff;display:inline-block;text-align:center;opacity:0.3;cursor:pointer;float:left;margin-left:5px;line-height:22px;}
  11.     .j_right_arrow{width:25px;height:25px;border-radius:50%;background-color:#000;color:#fff;display:inline-block;text-align:center;opacity:0.3;cursor:pointer;float:right;margin-right:5px;line-height:22px;}
  12.     .j_carousel_img{cursor:pointer;margin:0;}
  14.     .j_dis_img{position:absolute;top:0;left:0;opacity:0;transition:opacity 1s;}
  15. </style>

2 插件的注册和引用

此部分流程大致和评分插件完全一致

  • 在carousel.js完成注册，组件命名随意，我一般命名my+组件名，所以该插件命名my-carousel
  • 使用my-carousel插件之前，先import carousel.js，然后Vue.use()相关插件
  • 页面部分<my-carousel :carouselObj="carousel" @callback="select"></my-carousel>

具体流程参见评分插件的引用

3 插件的配置

3.1 参数配置

第二部分第三条：carouselObj传入一个对象，具体包含如下属性

属性名称属性意义默认值是否必须
data传入素材轮播数组，每条记录必须包含src属性，可包含id、name、urlnull是
click点击图片是否支持跳转true否
time图片切换周期（单位秒）3否
animate图片切换动画left否
arrow是否包含左右切换箭头true否
banner图片下方是否展示缩略true否
banner_click缩略圆点是否可点击true否

3.2 回调函数

callback回调函数select，当图片切换的时候出发，可以自行定义操作，不需要可以不配置回调函数

4 效果图

3d999c4937361254e62327c4187ea63.png-250.2kB

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注