基于Vue.js的轮播图前端

利用所学Vue知识构建一个网页的轮播图
1.效果
2.步骤
（1）构建基本html

文章图片文章图片文章图片 >

（2）.设置css

//父相子绝 .box {position: relative; width: 100%; height: 380px; margin: 0px auto; }//父盒子居中 .main {width: 100%; height: 380px; position: absolute; overflow: hidden; }//左右箭头的父盒子 .btnMain {width: 100%; height: 100%; position: absolute; } //左右箭头 .left {position: absolute; left: 15px; top: 50%; z-index: 10; }//z-index=10为了保证箭头的显示 right {position: absolute; right: 15px; top: 50%; z-index: 10; } //左右箭头的图片大小 .left img,.right img {width: 30px; height: 30px; }//图片数字下标盒子 .pressMain {position: absolute; left: 51%; bottom: 10px; width: 134px; height: 24px; margin-left: -67px; z-index: 20; } //每个数字下标 .pressMain span {display: inline-block; margin: 2px 10px; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: paleturquoise; text-align: center; line-height: 20px; } //跳转到哪张图片显示哪个数字下标 .pressMain .active {background: brown; }//轮播图组件 .item {list-style: none; width: 100%; height: 380px; position: absolute; left: 0px; top: 27px; transition: all 0.3s ease; } .item img {width: 81%; height: 100%; }//p0为右图,p1为左图,p2为中图 .p0{transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; z-index: 1; } .p1 {transform: translate3d(25%, 0, 0) scale(1); opacity: 0.8; z-index: 2; } .p2{transform: translate3d(10%, 0, 0) scale(1); opacity: 1; z-index: 3; }

（3）.JavaScript编写（Vue模块）
（1）el选择id为app的盒子
（2）data中存放
[1]list数组：存放显示的三张图片的所在地址
同时在html中轮播图盒子minMain中补上

 


文章图片

文章图片

[2]pressList：存放数字下标是否变色
同时在html中数字下标盒子pressMain中补上 {{item.name}}

文章图片

[3]imgindex：图片显示权限
[4]numList:存放数字下标

文章图片

（3）钩子函数：动态滚动图片，通过p0,p1,p2进行切换

mounted: function() { var Item = document.getElementsByClassName('item'); for(var i = 0; i < Item.length; i++) { Item[i].className = 'item ' + this.numList[i] } this.imgMove() this.pressList[0].isShow = true }

（4）方法
[1]imgMove:定时滚动图片

imgMove() {var Item = document.getElementsByClassName('item'); //每三秒滚动一次图片 this.imgTimer = setInterval(() => {this.numList.push(this.numList[0]); //实现图片的滚动 //shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 this.numList.shift(); this.imgIndex++; //p0,p1,p2分别为滚动图的右图，左图，中间图 for(var i = 0; i < Item.length; i++) {Item[i].className = 'item ' + this.numList[i]; } //使数组下标变为原来的颜色 for(var i in this.pressList) {this.pressList[i].isShow = false} //当数字下标为3时，下一次跳回1 if(this.imgIndex > 2) {this.imgIndex = 0; this.pressList[this.imgIndex].isShow = true; } else {this.pressList[this.imgIndex].isShow = true; } }, 3000)}

[2]leftclick:左箭头点击事件

leftClick() {var Item = document.getElementsByClassName('item'); //找到后一张图片 this.numList.unshift(this.numList[2]); this.numList.pop(); //利用p0,p1,p2实现向左滚动 for(var i = 0; i < Item.length; i++) {Item[i].className = 'item ' + this.numList[i]; } //实现数字下标转换 for(var i in this.pressList) {this.pressList[i].isShow = false; } this.imgIndex--; //若数字下标为1，再向左，数字要跳到3 if(this.imgIndex < 0) {this.imgIndex = 3this.pressList[this.imgIndex].isShow = true; } else {this.pressList[this.imgIndex].isShow = true; }}

[3]rightclick:右箭头点击事件

rightClick() {var Item = document.getElementsByClassName('item'); //找到前一张图片 this.numList.push(this.numList[0]); this.numList.shift(); //利用p0,p1,p2实现向右滚动 for(var i = 0; i < Item.length; i++) {Item[i].className = 'item ' + this.numList[i]; } //实现数字下标转换 for(var i in this.pressList) {this.pressList[i].isShow = false} this.imgIndex++ //若数字下标为3，再向右，数字要跳到1 if(this.imgIndex > 2) {this.imgIndex = 0; this.pressList[this.imgIndex].isShow = true; } else {this.pressList[this.imgIndex].isShow = true; }}}

【基于Vue.js的轮播图】4.引用自17素材网https://www.17sucai.com/pins/36052.html