记录下如何用vue实现PC端网易云轮播图效果

记录下自己写仿网易云音乐手写的轮播图，效果如图

简单来说，这个轮播图原理是用css定位把所有图片叠再一起，显示前3张图片，第2张图片层里设置层级为最高，1，3俩张图片层级比2层级低,比其他图片高就行。定义一个数组，放轮播图片的id名，删除数组最后一张图片class名放到数组第一个位置，获取轮播图对应dom,for循环遍历，重新设置id名，不停循环，图片就会不断从右向左浮动显示。从左向右同理删除数组第一张图片id名放到数组最后一个位置。

代码部分:



<template><div class="box"><ul class="img_list"><liv-for="(val, index) in banners":key="index":id="'last' + (index + 1)"><img class="img" :src="val.imageUrl" alt="" /></li><div class="span"><spanv-for="(val, index) in banners":key="index"@mouseover="mouse(index)"@mouseleave="leave()"></span></div></ul></div>
</template><script>
let li = [];
let time;
let index = 0;
export default {data() {return {elenent: [],banners: [],li1: [],};},mounted() {this.initImg();},beforeDestroy() {clearInterval(time);},methods: {//初始化图片initImg() {new Promise((resolve, reject) => {//请求图片this.getapi.homeImg().then((res) => {//console.log(res.banners, "1234img");this.banners = res.banners;//给定义数组赋值for (var i = 0; i < res.banners.length; i++) {li[i] = "last" + (i + 1);}// for (var i = 0; i < this.banners.length; i++) {//   this.li1[i] = li//   li.unshift(li.pop());// }let arr = [];for (let i = 0; i < this.banners.length; i++) {this.li1.push(JSON.parse(JSON.stringify(li)));li.unshift(li.pop());}//console.log(this.li1, "zxc123");resolve();});}).then(() => {//开启图片轮播//console.log(li,456)//this.li1 = JSON.parse(JSON.stringify(arr))console.log(this.li1, "zxc");time = setInterval(this.right1, 3000);});},right1() {let libox = document.getElementsByClassName("img_list")[0].children;let span = document.getElementsByClassName("span")[0].children;//删除最后一张图片放到第一张//console.log(li,456)li.unshift(li.pop());for (let i = 0; i < span.length; i++) {span[i].style.background = "#e6e6e6";}index++;if (index > span.length - 1) {index = 0;}span[index].style.background = "#ec4141";for (let i = 0; i < li.length; i++) {libox[i].id = li[i];}},right() {let libox = document.getElementsByClassName("img_list")[0].children;let span = document.getElementsByClassName("span")[0].children;//删除最后一张图片放到第一张//li.unshift(li.pop());//console.log(li);//console.log(index,'zxc')for (let i = 0; i < span.length; i++) {span[i].style.background = "#e6e6e6";}if (index > span.length - 1) {index = 0;}span[index].style.background = "#ec4141";//index++;for (let i = 0; i < li.length; i++) {libox[i].id = li[i];}},left() {let libox = document.getElementsByClassName("img_list")[0].children;let span = document.getElementsByClassName("span")[0].children;//删除最后一张图片放到第一张//li.push(li.shift());//console.log(li);//console.log(index,'zxc')for (let i = 0; i < span.length; i++) {span[i].style.background = "#e6e6e6";}if (index < 0) {index = 0;}span[index].style.background = "#ec4141";//index--},mouse(e) {let libox = document.getElementsByClassName("img_list")[0].children;clearInterval(time);li = JSON.parse(JSON.stringify(this.li1[e]));//console.log(li,789)if (e > index) {index = e;for (let i = 0; i < li.length; i++) {libox[i].id = li[i];}this.right();num = e;}if (e < index) {index = e;for (let i = 0; i < li.length; i++) {libox[i].id = li[i];}this.left();num = e;}//console.log(this.li1[e], index);},leave() {clearInterval(time);//index = numtime = setInterval(this.right1, 3000);},},
};
</script><style scoped>
.box {width: 95%;height: 180px;margin-left: 15px;margin-top: 20px;position: relative;
}
.img_list {width: 100%;height: 150px;
}
.img_list li {float: left;position: absolute;left: 0;border-radius: 10px;transition: all 0.5s;
}
.img_list li img {width: 400px;height: 150px;border-radius: 10px;
}
#last1 {left: 0;z-index: 1;
}
#last2 {left: 290px;transform: scale(1.25);z-index: 99;
}
#last3 {left: 645px;z-index: 1;
}
#but {position: absolute;z-index: 999;bottom: 200px;
}
.span {width: auto;height: 20px;position: absolute;bottom: -5px;z-index: 99;left: 46%;transform: translateX(-50%);
}
.span span {width: 30px;height: 5px;text-align: center;display: inline-block;background-color: #e6e6e6;margin-left: 20px;border-radius: 3px;
}
.span span:nth-child(1) {margin-left: 0px;background-color: #ec4141;
}
</style>

记录下如何用vue实现PC端网易云轮播图效果相关推荐

第九天 PC端网页特效(轮播图制作)
目录 1.元素偏移量 offset 1.1 offset 概述 1.2 offset 和 style 的区别 1.3案例 1.获取鼠标在盒子内的坐标 2.模仿京东图片放大镜的效果 2.元素可视区 cl ...
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
PC端网易云音乐播放云盘音乐时显示加载失败，自动调转下一首的解决方法
PC端网易云音乐播放云盘音乐时显示加载失败,自动调转下一首解决方法注意: 一定要看看是不是和你的情况一样,不一样不要用这种方法!!! 具体情况: 我们经常会下载歌曲存到电脑文件夹里,然后通过网易云音 ...
html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
移动端h5 层叠轮播图，uniapp微信小程序层叠轮播图，3d轮播图
如果你的项目使用的是jquery的话推荐使用swiper 进行做 https://www.swiper.com.cn/usage/index.html 如果用的是vue3开发的纯h5项目的话,推荐 ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...

记录下如何用vue实现PC端网易云轮播图效果

记录下如何用vue实现PC端网易云轮播图效果相关推荐

最新文章

热门文章