效果如上图:

原理:

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 写一个炫酷的轮播图的更多相关文章

  1. 转:大气炫酷焦点轮播图js特效

    使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...

  2. Android一个炫酷的树状图组织架构图开源控件实现过程

    Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...

  3. 用Vue实现一个简单的图片轮播

    本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...

  4. 一步一步拆解一个简单的iOS轮播图(三图)

    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...

  5. 用原生的javascript 实现一个无限滚动的轮播图

    说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...

  6. 教你用canvas打造一个炫酷的碎片切图效果

    前言 今天分享一个炫酷的碎片式切图效果,这个其实在自己的之前的博客上有实现过,本人觉得这个效果还是挺炫酷的,这次还是用我们的canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,需要点数 ...

  7. 用Canvas写一个炫酷的时间更新动画玩玩

    正文必须要写点什么...   // '; var WINDOW_WIDTH = 913; var WINDOW_HEIGHT = 400; var RADIUS = 7; //球半径 var NUMB ...

  8. javascript写淡入淡出效果的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jquery一个比较好的轮播图jQuery.kinMaxShow介绍

    kinMaxShow API 可选参数以及详解 kinMaxShow 主参数详解 参数名称 默认值 简单释义 height 500 [整型 (单位:像素)]焦点图高度,必须设置 缺省则启用默认高度 5 ...

随机推荐

  1. docker容器日志查看

    日志分两类,一类是 Docker 引擎日志:另一类是 容器日志. Docker 引擎日志 Docker 引擎日志 一般是交给了 Upstart(Ubuntu 14.04) 或者 systemd (Ce ...

  2. 主外键 设置 on update cascade 和on delete cascade 的区别

    on update cascade 和on delete cascade 的区别 这是数据库外键定义的一个可选项,用来设置当主键表中的被参考列的数据发生变化时,外键表中响应字段的变换规则的.updat ...

  3. iptables 配置场景3

    iptables -I INPUT -i lo -j ACCEPT    #允许本地回环地址访问: iptables -I INPUT -m state --state ESTABLISHED,REL ...

  4. setInterval调用ajax回调函数不执行的问题

    setInterval调用ajax回调函数不执行 1.首先检查你的setInterval()函数写法是否正确 参考写法 // 检查是否支付成功 var isPayRequest=false; var ...

  5. NETTY option参数

    Channel配置参数 (1).通用参数 CONNECT_TIMEOUT_MILLIS :   Netty参数,连接超时毫秒数,默认值30000毫秒即30秒. MAX_MESSAGES_PER_REA ...

  6. Java基础教程:多线程基础——线程池

    Java基础教程:多线程基础——线程池 线程池 在正常负载的情况瞎,通过为每一个请求创建一个新的线程来提供服务,从而实现更高的响应性. new Thread(runnable).start() 在生产 ...

  7. stochastic noise and deterministic noise

    在机器学习中,导致overfitting的原因之一是noise,这个noise可以分为两种,即stochastic noise,随机噪声来自数据产生过程,比如测量误差等,和deterministic ...

  8. 【JS】逻辑处理

    1.计算会员进度 const a = res.data.directCount(当前充值点券) / nextLevelData.map(item => item.direct_number(下一 ...

  9. IDEA将Git本地仓库Push至远程仓库

    转自:https://blog.csdn.net/qq_15653601/article/details/79870996 本地本地仓库项目: 配置Git自动识别本机Git配置

  10. 漏洞复现之Redis-rce

    通过主从复制 GetShell Redis主从复制 Redis是一个使用ANSI C编写的开源.支持网络.基于内存.可选持久性的键值对存储数据库.但如果当把数据存储在单个Redis的实例中,当读写体量 ...