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>

时间： 2024-10-10 13:27:55

VUE开发一个图片轮播的组件的相关文章

Vue学习—Vue写一个图片轮播组件

1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容. 2.每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用. 3.基本要求:页面加载,自动播放.鼠标悬停,停止播放.鼠标离开,继续播放 点击左右箭头切换上一张,下一张图片. 下方小圆点显示当前位第几张图片. 4.使用Vue实现,想法: 5.示例代码 结构html: <template>

实现一个图片轮播-3d播放效果

前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮播的效果,所以写下此文 使用方法: 首先,引入Swipe.js和Swipe.css 定义轮播列表ul[data-ride="swipe"],然后每一个轮播项都加上类 class="item" : 1 <!DOCTYPE html> 2 <html la

基于ionic框架封装一个图片轮播指令的几点

在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslidebanner',['$state',function(s){ return{ templateUrl:'directives/slide-banner/slide-banner.html', scope:{ banimg:'=',//数据的来源 }, link:function(s,el,atr)

每日一题_JavaScript.利用纯JavaScript Dom Core实现一个图片轮播效果 ?

具体需求:1. 页面加载后每隔2秒自动从轮播图片2. 鼠标悬停或是点击页面中小图片时,大图片自动跟随切换,并且停止轮播3. 鼠标离开小图片时,图片重新开始轮播 实现思路: 具体代码: html <!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title>Js实现图片轮播</title>         <l

写一个图片轮播器（使用collectionView）

一.属性 我们需要一个 collectionView 和一个 NStimer .collectionView 用来存放需要循环播放的对象, NSTimer 用来定时滚动collectionView @interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource> @property(nonatomic,strong)UICollectionView* showCollection; @proper

vue + swiper 实现图片轮播

1.安装swiper npm install [email protected].4.1 --save-dev 2.在组件中引用 swiper import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.实例 <template> <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move(

基于面向对象的图片轮播（js原生代码）

无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享----基于面向对象思想的图片轮播.其效果如下所示: 正如图片所示这样我们要实现的效果,这里与我们以往不同的是我们的布局十分简洁.其中html布局如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset

图片轮播插件的设计抽象

提出需求首页的轮播焦点图是个常见的需求.需求是这样子的1 每隔2秒切换一次图片2 切换图片的时候,会对应显示该图片的说明3 切换图片的时候,对应显示图片处于小按钮中的第几个,点击小按钮时跳到对应的大图4 自动滚动图片,鼠标放到图片区域时,停止滚动,移出时继续5 点击左右可以上下切换图片对于做一个图片轮播并不难,按照要求,写代码就行.而如何设计一个通用的图片轮播组件确实需要好好思考.因为样式是不确定的,同时html结构也是不确定的.所以问改如何设计这个轮播js呢? 使用插件?我是反插件的,除非插件

Swift版本的图片轮播器框架

由于在开发中,总是要写图片轮播器之类的东东,写的烦了,忍不住就用Swift写了一个非常方便的图片轮播器的框架https://github.com/SarielTang/CycleView 大家在使用的时候,只需要像这样: import CycleView class className : PictureCycleController{ //override loadView function //重写loadViewe方法 override func loadView() { super.lo