vue 写一个炫酷的轮播图
效果如上图:
原理:
1、利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏
2、利用 js 动态切换类名,达到切换效果
css代码如下
.swiper-certify{
/*上下左右居中*/
height: 100%;
width: 100%;
.centerPosition {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
} /*上下居中*/
.YcenterPosition {
position: absolute;
top: 50%;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
} /*左右居中*/
.XcenterPosition {
position: absolute;
left: 50%;
transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
} ul.swiper-certif-list {
width: 100%;
height: 100%;
margin: auto;
position: relative;
li {
width: 50%;
position: absolute;
transition: all 0.5s ease-out;
border-radius: 5px;
box-shadow: 0 10px 20px -10px #333;
cursor: pointer;
img {
width: 100%;
display: block;
}
} }
.p0, .p1 {
opacity: 0;
transform: translate3d(0, -50%, 0) scale(0.7);
transform-origin: 0 50%;
z-index: 0;
} .p2 {
opacity: 0.3;
transform: translate3d(0, -50%, 0) scale(0.7);
transform-origin: 0 50%;
z-index: 1;
} .p3 {
transform: translate3d(15%, -50%, 0) scale(0.8);
transform-origin: 0 50%;
opacity: 0.6;
z-index: 2;
} .p4 {
transform: translate3d(50%, -50%, 0) scale(1);
transform-origin: 0 50%;
z-index: 3;
opacity: 1;
} .p5 {
transform: translate3d(85%, -50%, 0) scale(0.8);
transform-origin: 100% 50%;
opacity: 0.7;
z-index: 2;
} .p6 {
opacity: 0.3;
transform: translate3d(100%, -50%, 0) scale(0.7);
transform-origin: 100% 50%;
z-index: 1;
}
.p7, .p8, .p9 {
opacity: 0;
transform: translate3d(100%, -50%, 0) scale(0.7);
transform-origin: 100% 50%;
z-index: 0;
}
}
vue 组件代码
<template>
<div class="swiper-certify">
<ul class="swiper-certif-list"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<li
v-for="(item,index) in swiperOption.imgs"
:key="index"
:class="classRender[index] || leftHide"
@click="slideClick(classRender[index])"
class="YcenterPosition"
>
<img :src="item">
</li>
</ul>
</div>
</template> <script>
import { clearInterval } from 'timers'; export default {
props:{
swiperOption:{
type:Object,
default:function(){
return {
imgs:[], //图片地址
speed:3000, //轮播时间
startIndex:0 //开始图片
}
}
}
},
data(){
var me = this;
var imgs = me.swiperOption.imgs || [];
var max = imgs.length;
var speed = me.swiperOption.speed || 3000;
var startIndex = me.swiperOption.startIndex || 0;
var hideNum = Math.floor((max - 5)/2); return {
max:max,
speed:speed,
index:startIndex,
classCenter:"p4",
classLeft:['p2', 'p3'],
classRight:['p5', 'p6'],
leftHide:'p0',
rightHide:'p7',
hideNum:hideNum,
classRender:[],
timerT:null
}
},
watch:{
'swiperOption.imgs':{
handler:function(val){
this.max = val.length;
this.hideNum = Math.floor((val.length - 5)/2);
},
deep:true
}
},
created(){ },
mounted(){
this.init();
},
methods:{
init(){
var me = this;
if(me.max <= 5){
me.refresh();
}else if(me.max > 5){
me.initLunbo();
}
},
initLunbo(){
var me = this;
me.refresh();
me.createTimer();
},
createTimer(){
var me = this; window.clearInterval(me.timerT);
me.timerT = setInterval(function () {
//console.log(me.index)
me.change(1);
}, me.speed);
},
change(dir){
var me = this;
var index = me.index;
index = index + dir;
if(index < 0){
index = me.max - 1;
}
if(index >= me.max){
index = 0;
}
me.index = index;
//当前展示第 index 个
me.refresh();
me.$emit("change",me.index);
},
refresh(){
var me = this;
var index = me.index;
if(index < 0 || index >= me.max){
return ;
}
//因为只展示五个
var arr = new Array(me.max);
var left = index -1;
var right = index + 1;
arr[index] = me.classCenter; var count = me.hideNum + 1; //左右都需要减两次
var classLeft = me.classLeft.slice(0);
while(count >= 0){
if(left < 0){
left = me.max-1;
}
if(classLeft.length >= 0){
arr[left] = classLeft.pop();
}else{
arr[left] = me.leftHide;
} left--;
count--;
}
count = me.hideNum + 1;
var classRight = me.classRight.slice(0);
while(count >= 0){
if(right >= me.max){
right = 0;
}
if(classRight.length){
arr[right] = classRight.shift();
}else{
arr[right] = me.rightHide;
}
right++;
count--;
} for(var i = 0; i < arr.length; i++){
if(!arr[i]){
arr[i] = me.rightHide;
}
}
me.classRender = arr;
},
changeTo(index){
var me = this;
if(index < 0){
index = me.max - 1;
}
if(index >= me.max){
index = 0;
}
me.index = index;
me.refresh();
me.$emit("change",me.index);
},
slideClick(cls){
var self = this;
if(cls == self.classLeft[0] || cls == self.classLeft[1]){
//左
self.change(1)
}
if(cls == self.classRight[0] || cls == self.classRight[1]){
//右
self.change(-1)
}
},
onMouseEnter(e){
window.clearInterval(this.timerT);
},
onMouseLeave(){
this.createTimer(self);
} }
}
</script>
<style lang="scss" scoped src="./swiper-certify.scss"></style>
使用方式:
直接引入:
vue 写一个炫酷的轮播图的更多相关文章
- 转:大气炫酷焦点轮播图js特效
使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...
- Android一个炫酷的树状图组织架构图开源控件实现过程
Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...
- 用Vue实现一个简单的图片轮播
本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...
- 一步一步拆解一个简单的iOS轮播图(三图)
导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...
- 用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...
- 教你用canvas打造一个炫酷的碎片切图效果
前言 今天分享一个炫酷的碎片式切图效果,这个其实在自己的之前的博客上有实现过,本人觉得这个效果还是挺炫酷的,这次还是用我们的canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,需要点数 ...
- 用Canvas写一个炫酷的时间更新动画玩玩
正文必须要写点什么... // '; var WINDOW_WIDTH = 913; var WINDOW_HEIGHT = 400; var RADIUS = 7; //球半径 var NUMB ...
- javascript写淡入淡出效果的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery一个比较好的轮播图jQuery.kinMaxShow介绍
kinMaxShow API 可选参数以及详解 kinMaxShow 主参数详解 参数名称 默认值 简单释义 height 500 [整型 (单位:像素)]焦点图高度,必须设置 缺省则启用默认高度 5 ...
随机推荐
- docker容器日志查看
日志分两类,一类是 Docker 引擎日志:另一类是 容器日志. Docker 引擎日志 Docker 引擎日志 一般是交给了 Upstart(Ubuntu 14.04) 或者 systemd (Ce ...
- 主外键 设置 on update cascade 和on delete cascade 的区别
on update cascade 和on delete cascade 的区别 这是数据库外键定义的一个可选项,用来设置当主键表中的被参考列的数据发生变化时,外键表中响应字段的变换规则的.updat ...
- iptables 配置场景3
iptables -I INPUT -i lo -j ACCEPT #允许本地回环地址访问: iptables -I INPUT -m state --state ESTABLISHED,REL ...
- setInterval调用ajax回调函数不执行的问题
setInterval调用ajax回调函数不执行 1.首先检查你的setInterval()函数写法是否正确 参考写法 // 检查是否支付成功 var isPayRequest=false; var ...
- NETTY option参数
Channel配置参数 (1).通用参数 CONNECT_TIMEOUT_MILLIS : Netty参数,连接超时毫秒数,默认值30000毫秒即30秒. MAX_MESSAGES_PER_REA ...
- Java基础教程:多线程基础——线程池
Java基础教程:多线程基础——线程池 线程池 在正常负载的情况瞎,通过为每一个请求创建一个新的线程来提供服务,从而实现更高的响应性. new Thread(runnable).start() 在生产 ...
- stochastic noise and deterministic noise
在机器学习中,导致overfitting的原因之一是noise,这个noise可以分为两种,即stochastic noise,随机噪声来自数据产生过程,比如测量误差等,和deterministic ...
- 【JS】逻辑处理
1.计算会员进度 const a = res.data.directCount(当前充值点券) / nextLevelData.map(item => item.direct_number(下一 ...
- IDEA将Git本地仓库Push至远程仓库
转自:https://blog.csdn.net/qq_15653601/article/details/79870996 本地本地仓库项目: 配置Git自动识别本机Git配置
- 漏洞复现之Redis-rce
通过主从复制 GetShell Redis主从复制 Redis是一个使用ANSI C编写的开源.支持网络.基于内存.可选持久性的键值对存储数据库.但如果当把数据存储在单个Redis的实例中,当读写体量 ...