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 无提示关闭窗口脚本
Aug 17 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
php无限级分类实现方法分析
2016/10/19 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
一个JS的日期格式化算法示例
2013/07/31 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
js+canvas实现纸牌游戏
2020/03/16 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
解析Python中的__getitem__专有方法
2016/06/27 Python
python中图像通道分离与合并实例
2020/01/17 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Django分组聚合查询实例分享
2020/04/29 Python
python能自学吗
2020/06/18 Python
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
业务经理的岗位职责
2013/11/16 职场文书
电大本科自我鉴定
2014/02/05 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
教育实习指导教师评语
2014/12/31 职场文书
学校运动会感想
2015/08/10 职场文书
离婚财产分割协议书
2015/08/11 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python