完成效果图如下:

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>

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

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

    1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...

  2. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

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

    在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...

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

    前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...

  5. 继上一篇随笔,优化3张以上图片轮播React组件

    import React from 'react'; import PropTypes from 'prop-types'; import {getSwipeWay} from '../utils/s ...

  6. vue实例之组件开发:图片轮播组件

    一.普通方式: 其中,index是关键. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. Unslider Web前端框架之图片轮播

    前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...

  8. 基于面向对象的图片轮播(js原生代码)

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  9. html css+div+jquery实现图片轮播

    一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...

随机推荐

  1. Intellij IDEA 常用快捷键

    [常规] Ctrl+Shift + Enter,语句完成 "!",否定完成,输入表达式时按 "!"键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更 ...

  2. java内功 ---- jvm虚拟机原理总结,侧重于虚拟机类加载执行系统

    参考书籍:<深入理解java虚拟机>,三天时间用了八个小时看完,像读一本武侠小说,挺爽. 另外需声明:图片都是从我自己的csdn博客转载,所以虽然有csdn标识,但都是我自己画的图片. j ...

  3. Java从网络读取图片并保存至本地

    package cn.test.net; import java.io.File; import java.io.FileOutputStream; import java.io.InputStrea ...

  4. [BS-21] 关于OC中对象与指针的思考

    关于OC中对象与指针的思考 1. 创建对象: OC中可通过代码Person *p = [[Person alloc] init];创建了一个对象p.该过程中内存情况为: 在当前线程的栈(默认1M)中, ...

  5. 深入理解 C# 协变和逆变

    msdn 解释如下: “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型. “逆变”则是指能够使用派生程度更小的类型. 解释的很正确,大致就是这样,不过不够直白. 直白的理解: “协变” ...

  6. Caching和Purgeable Memory (译)

    Caching和Purgeable Memory对于开发者来说是一个至关重要的资源,尤其是当我们需要处理那些需要超大内存以及计算时间的对象或者是当计算机向磁盘写入数据时导致应用程序陷入停滞时特别有用处 ...

  7. EL表达式中的“+-x/”四种运算符和条件,比较运算符等

    <%@page import="cn.hncu.domain.User"%><%@ page language="java" import=& ...

  8. 从NIB中加载VIEW

    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"ChatMoreView" owner:nil options:nil]; ...

  9. 万能头文件#include &lt;bits/stdc++.h&gt;

    最近在做题的时候看到别人的题解发现别人都用这个 突然之间打开新世界的大门 去百度之后才知道#include <bits/stdc++.h>包含了目前所有的c++头文件 也就是说只要用#in ...

  10. pgpool-II 的使用

    1.pgpool-II的概念 pgpool-II 是一个位于 PostgreSQL 服务器和 PostgreSQL 数据库客户端之间的中间件,它提供以下功能: 连接池 pgpool-II 保持已经连接 ...