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 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
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
基于PHP文件操作的详解
2013/06/05 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
前台文员我鉴定
2014/01/12 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
工程建设实施方案
2014/03/14 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
建筑工地质量标语
2014/06/12 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
商务经理岗位职责
2014/07/30 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
质量承诺书格式范文
2015/04/28 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python
教你一步步实现一个简易promise
2021/11/02 Javascript