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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于vue实现swipe轮播组件实例代码
项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper. 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个110k的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图 当当当当~~~ 我们今天的主角登场了,thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有14.2k,真真的轻量级 啊.还有,还有 翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器.此
-
Vue 过渡实现轮播图效果
Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过渡 下面例子中我们用到列表过渡,可以先学习一下官方的例子 要同时渲染整个列表,比如使用 v-for,我们需要用到 <transition-group> 组件 Vue 轮播图 我们先看这样一个列表 <ul> <li v-for="list in slideList"> <i
-
利用vueJs实现图片轮播实例代码
最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播,便做个简单的记录 以下只贴出carousel.vue代码,其他的省略 <template> <div ref="root"> <div class="sliderPanel"> <div v-for="(item,index) in imgArray" class="verticalCenter picbox">
-
基于vue.js实现图片轮播效果
轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$
-
Vue中如何实现轮播图的示例代码
这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"
-
基于vue.js轮播组件vue-awesome-swiper实现轮播图
一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u
-
vue轮播图插件vue-awesome-swiper的使用代码实例
最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤: 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesom
-
利用Vue实现移动端图片轮播组件的方法实例
前言 轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点 支持自动播放 & 无限轮播 (loop) 效果 支持用户滑
-
VUE开发一个图片轮播的组件示例代码
本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考.希望此文章对各位有所帮助. 完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden"> <div class="slide
-
C#实现图片轮播功能的示例代码
目录 实践过程 效果 代码 实践过程 效果 代码 public partial class Form1 : Form { public Form1() { InitializeComponent(); } public bool Pflag; int flag = 0; FileSystemInfo[] fsinfo; ArrayList al = new ArrayList(); int MM = 0; private void splitContainer2_Panel2_Paint(obj
-
使用React实现轮播效果组件示例代码
前言 我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal层中定制数据,然后双向改变.但是React是通过prop和state来改变view层的状态.下面是我写的一个轮播图组件,可以直接看一下.代码很简单.原理就是通过React在componentDidMount后改变setState,来动态改变css样式. 说明以下:看gif很卡,但是实际效果还是很好的. 以下是示例代码 LunBo.js require('styles/App.css'); req
-
用vue写一个仿简书的轮播图的示例代码
1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $
-
Vue使用Swiper封装轮播图组件的方法详解
目录 Swiper 为什么要封装组件 开始封装 1.下载安装Swiper 2.引入css样式文件 3.引入js文件 4.把官网使用方法中的HTML结构复制粘贴过来 5.初始化Swiper 自定义效果 完整代码 效果展示 Swiper Swiper是一个很常用的用于实现各种滑动效果的插件,PC端和移动端都能很好的适配. 官网地址:www.swiper.com.cn/ 目前最新版本是Swiper7,但众所周知最新版本通常不稳定,所以这里使用Swiper6来封装. Swiper各版本区别: 为什么要封
-
基于BootStrap的图片轮播效果展示实例代码
先给大家展示下bootstrap图片轮播图,效果如下所示,如果大家感觉效果还不错,请继续往下阅读,参考实现代码. 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="
-
JavaScript实现无缝轮播图的示例代码
目录 上效果 一.实现过程 1)首先实现基本布局 2)主要样式 二.如何实现无缝呢 (重点来了) 思路: 主要代码 完整代码 花费一个下午从0到1实现的轮播图,当然还有很多需要改进的地方(欢迎提出需要改进的地方),等我再努力努力,将其封装成一个组件. 上效果 一.实现过程 1)首先实现基本布局 <div class="carousel-container"> //图片列表 <div class="carousel-list"></div
-
原生Js 实现的简单无缝滚动轮播图的示例代码
简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码. 原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &