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 checkbox(复选框) 使用集锦
Apr 28 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
JS实现灯泡开关特效
Mar 30 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 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 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php中memcache 基本操作实例
2015/05/17 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
PHP7 windows支持
2021/03/09 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
pyside写ui界面入门示例
2014/01/22 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python交易记录整合交易类详解
2019/07/03 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
详解python内置模块urllib
2020/09/09 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
六道php面试题附答案
2014/06/05 面试题
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
党员个人承诺书
2015/04/27 职场文书
中秋节晚会开场白
2015/05/29 职场文书
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL