基于Vue.js的轮播图

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

<div id="app">
			<div class="box">
				<div class="main">
					<!--轮播图  -->
					<div class="minMain">
						<div class="item" >
							<img :src="item.imgUrl" />
						</div>
					</div>
					<!--左右两个箭头  -->
					<div class="btnMain">
						<div class="left" >
							<img src="img/ljiantou.png" />
						</div>
						<div class="right" >
							<img src="img/rjiantou.png" />
						</div>
					</div>
					<!--图下标123  -->
					<div class="pressMain">
						<span></span>
					</div>
				</div>
			</div>
</div>

（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中补上<div class="minMain"> <div class="item" v-for="(item,index) in list" :key="index"> <img :src="item.imgUrl" /> </div> </div>

[2]pressList：存放数字下标是否变色
同时在html中数字下标盒子pressMain中补上<div class="pressMain"> <span v-for="(item,index) in pressList" :class="{active:item.isShow}">{{item.name}}</span> </div>

[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;}}}

4.引用自17素材网https://www.17sucai.com/pins/36052.html

来源：CSDN

作者：高产似母猪的小号

链接：https://blog.csdn.net/zeshen123/article/details/103840604