vue2的堆叠轮播图 (5张图错开叠加,来回切换)

先上图:

这是一个js文件,需要在vue项目中引用这个,前提是你要下载swiper插件.

export class Swiper {constructor(options) {this.$options = options;this.__init();this.__timers();}__init() {this.SwiperContent = document.querySelector(this.$options.SwiperContent).children;this.classList = this.$options.classList;this.__move(this.classList);}__move(list) {[...this.SwiperContent].forEach((item, index) => {item.setAttribute("class", list[index]);});}__leftMove() {this.a = this.classList.pop();this.classList.unshift(this.a);this.__move(this.classList);}__timers() {setInterval(() => {this.__leftMove();}, 3000);}
}

下面是vue的组件中的代码:

<template><div><div class="titelText">失落的灵魂</div><div class="bottomm"></div><div class="Swiper"><div class="Swiper-content"><div class="Swiper-item" v-for="(item, index) in imageUrl" :key="index"><img :src="item" alt="" /></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div></div>
</template><script>
import { Swiper } from "../swiper/Swiper";
export default {name: "Swiper",data() {return {imageUrl: ["https://newstore.vynior.com/shiying1%402x.png","https://newstore.vynior.com/shiying2.png","https://newstore.vynior.com/shiying3.png","https://newstore.vynior.com/shiying5.png","https://newstore.vynior.com/shiying8%402x.png","https://newstore.vynior.com/shiying4.png","https://newstore.vynior.com/shiying7.png","https://newstore.vynior.com/shiying6.png",],classList: ["one", "two", "three", "four", "five",'six','seven','eit'],};},methods: {swiper() {new Swiper({classList: this.classList,SwiperContent: ".Swiper-content",navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});},},mounted() {this.swiper();},
};
</script><style scoped>
.titelText {position: absolute;font-size: 50px;width: 100%;top: 20px;text-align: center;font-family: "YouYuan";letter-spacing: 8px;color: white;text-shadow: 0 0 0px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00ffea,0 0 20px #00ffd5, 0 0 30px #00eeff, 0 0 40px #00ffff, 0 0 50px #00fff2;
}
.bottomm {height: 150px;width: 100%;position: absolute;bottom: 0;background-image: url("../assets/image/11.png");left: 0;right: 0;background-size: 100%;background-repeat: no-repeat;border-top: 30px solid rgba(20, 20, 20, 0.5);box-shadow: 0 0 10px rgb(255, 243, 187);
}
.Swiper {height: 250px;width: 100%;position: relative;margin: 150px auto;
}.Swiper-content {height: 100%;width: 50%;position: relative;margin: 0 auto;left: 15px;
}.Swiper-content div {position: absolute;height: 150px;width: 120px;margin-top: 50px;transition: all 0.6s;
}
.Swiper-content img {/* height: 100%;width: 100%; */
}
.one {z-index: 1;transform: scale(0.8);left: -60px;box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.two {z-index: 2;transform: scale(0.9);left: 75px;box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}.three {z-index: 9;transform: scale(1);left: 282px;box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.four {z-index: 2;transform: scale(0.9);left: 599px;box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}.five {z-index: 1;transform: scale(0.8);left: 835px;box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.six {z-index: 1;transform: scale(0.8);left: 835px;box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.seven {z-index: 1;transform: scale(0.8);left: 835px;box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.eit {z-index: 1;transform: scale(0.8);left: 835px;box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}</style>

注释:原作者是五张图,我是八张图,把多的图调整left 隐藏到后面; 正面就显示5张图,分别对应的是属性设置是 one.tow......

加字体的话,不要循环图片,单个写出,在图片后面写p标签就可以了.给出代码.(文字用来解释图片,一起循环)

希望对大家有帮助.有什么问题可以提出讨论..

vue2的堆叠轮播图 (5张图错开叠加,来回切换)相关推荐

最简洁,最全面的vue2.0实现轮播图实战教程详解
因为最近在做一个积分奖励项目,首页要做一个轮播图,正好借这这次机会把本次使用vue2.0实现轮播图的详细过程分享出来. 废话不多说,先来个效果图(备注:图片是临时在网上找的,各位关注轮播图效果即可): ...
html小圆图堆叠轮播,每次移一张图片的无缝轮播图
my动画轮播图 *{ list-style: none; margin: 0px; padding: 0px; } .carousel{ width: 530px; height: 280px; ov ...
el轮播图片image单张图比例缩放及多张图宽度固定高度等比例自适应展示；
开发过程中xx产品强烈需要轮播图的布局不固定, 单张等比例缩放展示,多张图取最高高度自适应展示:通过修改图片img 父级盒子容器宽高固定图片高度: 单张:1.方图 (宽高比例 ± 15% ) 2 . ...
【uniapp】3d轮播图/堆叠轮播图/层叠轮播图
前言 uniapp 3d轮播图 uniapp实现3D轮播图从uniapp插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=243#detail 操作步骤导入 ...
php制作图片轮播_JavaScript_jQuery制作简洁的图片轮播效果，演示图：核心代码：$ - phpStudy...
jQuery制作简洁的图片轮播效果演示图: 核心代码: $(document).ready(function(){ var $iBox = $('.imgBox'), $iNum = $('.img ...
VUE使用轮播图画3D模型图
使用vue的组件和three.js画出3d模型图直接上代码,有问题评论区联系吧,经常在线.qq:2277655147 <template><div class="card ...
js轮播最后一张跳到第一张的处理
如果直接最后一张滑到第一张会显得很僵硬,所以前后都放要显示第一张图片实现前后的切换可以优化这个效果当此时点击左边的时候,直接跳到最后一张的图一然后往回走, 点击后此时的图片为最后一张图,再往回走同 ...
linux内核运行关系图,一张图看懂Linux内核运行交互关系
很多朋友如果接触过Linux的都知道Kernel的含义,kernel是操作系统的核心或者最重要的部分.众所周知的是,几乎整个互联网都运行在 Linux上,从网络协议,到服务器,到你平常访问的绝大多数 ...
一张图学会python3高清图-一张图理清 Python3 所有知识点
如果你前几天一直有关注 GitHub Trending,那你应该会留意到「Python3 in one pic」这个开源项目. 很多人学习python,不知道从何学起. 很多人学习python,掌握了 ...

vue2的堆叠轮播图 (5张图错开叠加,来回切换)

vue2的堆叠轮播图 (5张图错开叠加,来回切换)相关推荐

最新文章

热门文章

vue2的堆叠轮播图 (5张图 错开叠加,来回切换)

vue2的堆叠轮播图 (5张图 错开叠加,来回切换)相关推荐

最新文章

热门文章

vue2的堆叠轮播图 (5张图错开叠加,来回切换)

vue2的堆叠轮播图 (5张图错开叠加,来回切换)相关推荐