VUE开发一个图片轮播的组件示例代码


Posted in Javascript onMarch 06, 2017

本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考。希望此文章对各位有所帮助。

完成效果图如下:

VUE开发一个图片轮播的组件示例代码

vue开发的思路主要是数据绑定,代码如下:

<template>
 <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden">
  <div class="sliderPanel"
     :class="{transitionAni:ani}"
     :style="{height:height,transform:translateX}">
   <div v-for="item in itemList" class="verticalCenter picbox" :style="{left:item.x+'px'}">
    <img :style="{width:width,top:top}" :src="item.url" style="min-height: 100%">
   </div>
  </div>
  <div @click="clickLeft" class="arrowLeft verticalCenter horizaCenter">
   <img src="./image/arrow.png" style="transform: rotate(180deg)">
  </div>
  <div @click="clickRight" class="arrowRight verticalCenter horizaCenter">
   <img src="./image/arrow.png">
  </div>
  <div class="arrowBottom verticalCenter horizaCenter" >
   <img src="./image/arrow.png" style="transform: rotate(90deg) scale(0.7)">
  </div>
  <div class="sliderBar horizaCenter">
   <div v-for="(item,index) in imgArray" @click="clickSliderCircle(index)" class="circle" :class="{circleSelected:item.selected}">
   </div>
  </div>
 </div>
</template>
<script>
 const SCREEN_WIDTH=document.body.clientWidth
 const SCREEN_HEIGHT=document.body.scrollHeight
 var left,center,right
 var selectIndex=0
 var count=0
 var second=3//slider 时间间隔
 var timer=null
 var ani=null
 var debugScale=1.0//测试用可调整为小于1
 var Direction={left:'left',right:'right'};
 var autoDirection=Direction.right
 var canClick=true
 export default({
  data:function(){
   return{
    width:'100%',
    height:SCREEN_HEIGHT+'px',
    top:0,
    ani:true,
    translateX:'scale('+debugScale+') translateX(0px)',
    imgArray:[
     {
      x:0,
      title1:'现在,在您的实验室',
      tilte2:'也可以轻松完成无创DNA产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/1.jpg',
      selected:false,
     },
     {
      x:0,
      title1:'Sequel开启新基因组时代',
      tilte2:'覆盖十余种胎儿染色体疾病,体验升级,呵护加倍',
      title3:'了解更多',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/2.jpg',
     },
     {
      x:0,
      title1:'BRCA1/2全外显子基因突变检测',
      tilte2:'也可以轻松完成无创DNA产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/3.jpg',
     },
     {
      x:0,
      title1:'现在,在您的实验室',
      tilte2:'也可以轻松完成无创DNA产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/4.jpg',

     },
     {
      x:0,
      title1:'现在,在您的实验室',
      tilte2:'也可以轻松完成无创DNA产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/5.jpg',
     },
     {
      x:0,
      title1:'现在,在您的实验室',
      tilte2:'也可以轻松完成无创DNA产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/6.jpg',
     },
     {
      x:0,
      title1:'现在,在您的实验室',
      tilte2:'也可以轻松完成无创DNA产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/7.jpg',
     },
     {
      x:0,
      title1:'现在,在您的实验室',
      tilte2:'也可以轻松完成无创DNA产前检测',
      title3:'了解详细流程',
      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',
      url:'static/image/8.jpg',
     }
    ],
    itemList:[]
   }
  },
  mounted:function(){
   ani=this.$refs.root.querySelector('.sliderPanel')
   count=this.imgArray.length
   this.setIndex(selectIndex)
   //自动滚动切换图片
   this.slideAuto(second)
  },
  methods:{
   clickLeft:function(){
     if(!canClick) return false
    autoDirection=Direction.left
    this.slideAuto(second)
    this.moveLeftAni()
    canClick=false
   },
   clickRight:function(){
    if(!canClick) return false
    autoDirection=Direction.right
    this.slideAuto(second)
    this.moveRightAni()
    canClick=false
   },
   slideRight:function () {
    selectIndex++
    if(selectIndex+1>count){
     selectIndex=0
    }else if(selectIndex<0){
     selectIndex=count-1
    }
    this.setIndex(selectIndex)
   },
   slideLeft:function () {
    selectIndex--
    if(selectIndex+1>count){
     selectIndex=0
    }else if(selectIndex<0){
     selectIndex=count-1
    }
    this.setIndex(selectIndex)
   },
   clickSliderCircle:function (index) {
    this.slideAuto(second)
    this.setIndexPre(index)
   },
   setIndexPre:function (index) {
    if(!canClick) return false
    canClick=false
    if(index==selectIndex)return
    var leftIndex=index
    var centerIndex=selectIndex
    var rightIndex=index
    for(var i=0;i<count;i++){
     if(i==selectIndex){
      this.imgArray[i].selected=true
     }else{
      this.imgArray[i].selected=false
     }
    }
    left=this.imgArray[leftIndex]
    center=this.imgArray[centerIndex]
    right=this.imgArray[rightIndex]
    left=JSON.parse(JSON.stringify(left))
    right=JSON.parse(JSON.stringify(right))
    left.x=-SCREEN_WIDTH
    center.x=0
    right.x=SCREEN_WIDTH
    left.index=leftIndex
    center.index=centerIndex
    right.index=rightIndex
    this.itemList=[left,center,right]
    if(index>selectIndex){
     autoDirection=Direction.right;
      +function(obj){
      obj.anicompted(
       'scale('+debugScale+') translateX('+0+'px)',
       'scale('+debugScale+') translateX('+-SCREEN_WIDTH+'px)',
       function(){
        obj.setIndex(index)
       })
     }(this)
     //右移
    }else if(index<selectIndex){
     //左移
     autoDirection=Direction.left;
     +function(obj){
      obj.anicompted(
       'scale('+debugScale+') translateX('+0+'px)',
       'scale('+debugScale+') translateX('+SCREEN_WIDTH+'px)',
       function(){
        obj.setIndex(index)
       })
     }(this)
    }
   },
   setIndex:function (index) {
    var leftIndex=index-1
    var centerIndex=index
    var rightIndex=index+1
    if(index<=0){
     index=0
     leftIndex=count-1
     centerIndex=index
     rightIndex=index+1
    }else if(index>=count-1){
     index=count-1
     leftIndex=index-1
     centerIndex=index
     rightIndex=0
    }
    selectIndex=index
    for(var i=0;i<count;i++){
      if(i==selectIndex){
       this.imgArray[i].selected=true
      }else{
       this.imgArray[i].selected=false
      }
    }
    left=this.imgArray[leftIndex]
    center=this.imgArray[centerIndex]
    right=this.imgArray[rightIndex]
    left.x=-SCREEN_WIDTH
    center.x=0
    right.x=SCREEN_WIDTH
    left.index=leftIndex
    center.index=centerIndex
    right.index=rightIndex
    this.itemList=[left,center,right]
   },
   slideAuto:function () {
     clearInterval(timer);
     +function (obj) {
      timer=setInterval(function () {
       if(autoDirection==Direction.left){
        obj.moveLeftAni()
       }else{
        obj.moveRightAni()
       }
      },second*1000)
     }(this)
   },
   moveLeftAni:function(){
     +function(obj){
      obj.anicompted(
       'scale('+debugScale+') translateX('+0+'px)',
       'scale('+debugScale+') translateX('+SCREEN_WIDTH+'px)',
       function(){
        obj.slideLeft()
       })
     }(this)
   },
   moveRightAni:function(){
    +function(obj){
      obj.anicompted(
       'scale('+debugScale+') translateX('+0+'px)',
       'scale('+debugScale+') translateX('+-SCREEN_WIDTH+'px)',
       function(){
        obj.slideRight()
       })
     }(this)
   },
   anicompted:function(fromStr,toStr,callBack){
    var handler=null,obj=this
    handler=function(){
     ani.removeEventListener('webkitTransitionEnd',handler,false)
     callBack()
     obj.ani=false
     obj.translateX=fromStr
     canClick=true
    }
    ani.removeEventListener('webkitTransitionEnd',handler,false)
    ani.addEventListener('webkitTransitionEnd',handler,false)
    this.ani=true
    this.translateX=toStr
   }
  }

 })

</script>
<style scoped>
 .transitionAni{
  transition: all 0.8s cubic-bezier(.23,1,.32,1);
  /*transition: transform 1s;*/
 }
 .arrowLeft{
  transition: all 0.4s ease;
  width: 60px;
  height: 60px;
  position: absolute;
  left: 15px;
  top: 50%;
  margin-top: -30px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
 }
 .arrowLeft:hover{
  background: rgba(0,0,0,0.8);
  transform: scale(1.1);
 }
 .arrowRight{
  transition: all 0.4s ease;
  width: 60px;
  height: 60px;
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -30px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
 }
 .arrowRight:hover{
  background: rgba(0,0,0,0.8);
  transform: scale(1.1);
 }
 .sliderBar{
  width:100%;height: auto;position: absolute;bottom: 50px;
 }
 .circle{
  width: 15px;
  height: 15px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  display: table-cell;
  margin-right: 3px;
  transition: all 0.5s ease;
 }
 .circle:hover{
  background: #C7015C;
  transform: scale(1.15);
 }
 .circleSelected{
  background: #C7015C;
  transform: scale(1.15);
 }
 .arrowBottom{
  width: 80px;
  height: 50px;
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -40px;
  background: #C7015C;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: all 0.5s ease-out;
 }
 .arrowBottom:hover{
  transform: translateY(-10px);
  background: deeppink;
 }
 .picbox{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden;
  /*transform: scale(0.9);*/
  /*opacity: 0.2;*/
  transition: all 0.45s ease;
 }
 /*@keyframes arrowOut-animation {*/
  /*from{*/
   /*transform: translateY(0px);*/
  /*}*/
  /*to{*/
   /*transform: translateY(15px);*/
   /*!*width:200px;*!*/
  /*}*/
 /*}*/
 /*@keyframes arrowIn-animation {*/
  /*from{*/
   /*transform: translateY(15px);*/
  /*}*/
  /*to{*/
   /*transform: translateY(0px);*/
   /*!*height: 200px;*!*/
  /*}*/
 /*}*/
 /*.arrowOut{*/
  /*animation: arrowOut-animation;*/
  /*animation-duration: 0.5s;*/
  /*animation-timing-function: ease-out;*/
  /*animation-fill-mode:forwards;*/
 /*}*/
 /*.arrowIn{*/
  /*animation: arrowIn-animation;*/
  /*animation-duration: 0.5s;*/
  /*animation-timing-function:ease-out;*/
  /*animation-fill-mode:forwards;*/

 /*}*/
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
jquery默认校验规则整理
Mar 24 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
canvas仿iwatch时钟效果
Mar 06 #Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 #Javascript
纯JS实现弹性导航条效果
Mar 06 #Javascript
JS实现颜色动态淡化效果
Mar 06 #Javascript
vue模板语法-插值详解
Mar 06 #Javascript
js中的面向对象入门
Mar 06 #Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 #Javascript
You might like
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php header函数的常用http头设置
2015/06/25 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
JavaScript入门学习书籍推荐
2008/06/12 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
JS中的phototype详解
2017/02/04 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
node实现分片下载的示例代码
2018/10/17 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
Python 实现自动导入缺失的库
2019/10/29 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python短信轰炸的代码
2020/03/25 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
大型会议策划方案
2014/05/17 职场文书
党支部特色活动方案
2014/08/20 职场文书
镇创先争优活动总结
2014/08/28 职场文书
校长师德表现自我评价
2015/03/05 职场文书
招商银行收入证明
2015/06/17 职场文书
教师节联欢会主持词
2015/07/04 职场文书
反邪教学习心得体会
2016/01/15 职场文书