vue点击上下按钮图片切换(联动显示)

这个效果在网站中也非常常见,我是在vue中用了jquery的scrollTop方法来获取元素滚动条的垂直位置,点击按钮依次增加或减去图片模块的高度,当然还用到了动态绑定背景图片,下面咱们来看一下效果

HTML代码

<div id="box">
	<img class="imgOne" :style="{backgroundImage: `url(${Img[index].picture})`}">
	<div class="boxSon">
		<img src="img/4.png" class="arrowTop" @click="scrollUp">
			<div class="height">
				<div v-for="(item,index) in Img" :key="index">
					<img class="imgTwo" :class="{active:num == index}" :style="{backgroundImage: `url(${item.picture})`}"  @click="btnImg(index)">
				</div>
			</div>
		 <img src="img/3.png" class="arrowBottom" @click="scrollDown">
	</div>
</div>

CSS代码

#box {
	width:35%;
	margin: 20px auto;
	display: flex;
	justify-content: space-around;
	align-items: center
}
.boxSon {
	width: 30%;
	text-align: center;
}
.imgOne {
	width: 300px;
	height: 250px;
	background-size: cover;
	background-position: center;
}
.imgTwo {
	width: 100px;
	height: 70px;
	background-size: cover;
	background-position: center;
	border: 2px solid black;
}
.height {
	height: 300px;
	overflow: auto;
	margin: 10px 0
}
.height::-webkit-scrollbar {
	display: none;
}
.arrowTop,.arrowBottom {
	cursor: pointer;
}
.active {
	border: 2px solid red;
}

JS代码

<script>
	new Vue({
		el: '#box',
			data() {
				return {
					index: 0, //默认显示第一张大图
					num: 0, //控制第一张小图的样式
					scroll: true,//节流阀
					Img: [{
						picture: 'img/one.jpg'
					},
					{
						picture: 'img/two.jpg'
					},
					{
						picture: 'img/three.jpg'
					},
					{
						picture: 'img/four.jpg'
					},
					{
						picture: 'img/five.jpg'
					},
					{
						picture: 'img/six.jpg'
					},
					]
				}
			},
			methods: {
				//上箭头
				scrollUp() {
					if (this.scroll) {
						this.scroll = false;
						let up = document.querySelector('.height');
						$(".height").animate({
							scrollTop: up.scrollTop - 78
						}, 500);
						setTimeout(() => {
							this.scroll = true;
						}, 300);
					}
					if (this.num == 0) {
						this.num = 0
					} else {
						this.num--;
						this.index--;
					}
				},
				//下箭头
				scrollDown() {
					if (this.scroll) {
						this.scroll = false;
						let down = document.querySelector('.height');
						$('.height').animate({
							scrollTop: down.scrollTop + 78
						}, 500);
						setTimeout(() => {
							this.scroll = true;
						}, 300);
					}
					if (this.num >= this.Img.length - 1) {
						this.num = this.Img.length - 1
					} else {
						this.num++;
						this.index++;
					}
				},
				//点击小图切换
				btnImg(index) {
					this.num = index;
					this.index = index;
				}
			}
		})
</script>

ok结束,别忘了在vue中引入jquery哦,记得用定时器打开节流阀的开关。