Vue案例：图片动态切换效果
作者: 图恩分类: 编程开发阅读: 408发布时间： 2022-01-02 06:31:47
这个实例的容器分为两大部分，一是左边的大图，二是右边的缩略图，效果图如下：
屏幕截图 2021-12-30 193529.jpg
左边的大图会根据右边的缩略图进行左右滚动，图片的文字也会跟着发生变化，显示图片是第几张，文字也有一个效果，会先消失，然后等图片要切换完成后慢慢出现，缺点就是大图的宽是不能够自适应的，只能固定大小。
image
右边的缩略图会简体鼠标的滚动，跟着鼠标上下滑动，鼠标点击后图片会产生高亮还会有一个橙色的边框，左边的大图显示相应的图片，这边的缩略图的宽度是可以自适应的。
image
监听鼠标滚动的方法
<div @mousewheel='方法名'>
......
</div>
let delta = e.deltaY;
//firefox使用deltaY:下3上-3,其他浏览器使用wheelDelta:下-120上120//下滚
if (delta > 0) {//下滚}
if (delta < 0) {//上滚}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态图片切换效果</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<div class="big-box" @mousewheel='onScroll'>
<div class="big-img">
<ul class="imgbox">
<li class="fleximg" ref='bigimg'>
<div v-for='(item,index) in src'>
<img :src="item" alt="">
</div>
</li>
</ul>
<p ref="pictures">pictures13</p>
</div>
<div class="thumbnail-box" ref="scrollbox">
<ul ref="scroll">
<li v-for='(item,index) in src' @click='imgshow(index)'>
<img :src="item" alt="">
</li>
</ul>
</div>
</div>
</div>
<script src="../../js/vue.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
img {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.big-box {
width: 100%;
height: 662px;
background-color: rgb(45, 45, 51);
overflow: hidden;
}
.big-img {
float: left;
width: 80%;
height: 100%;
overflow: hidden;
position: relative;
transition: all 0.5s;
}
.big-img .imgbox {
width: 800px;
height: 90%;
margin: 3.5% auto;
overflow: hidden;
}
.big-img .imgbox .fleximg {
display: flex;
transition: all 1s;
}
.big-img .imgbox .fleximg div {
width: 800px;
height: 600px;
margin-right: 20px;
}
.big-img .imgbox .fleximg div img {
width: 800px;
min-height: 100%;
}
.big-img p {
display: block;
height: auto;
position: absolute;
top: 70%;
left: 40%;
color: rgb(255, 255, 255);
font-size: 56px;
text-shadow: 0 3px 2px #777;
}
.thumbnail-box {
float: right;
width: 20%;
height: 100%;
background-color: rgb(34, 36, 39);
}
.thumbnail-box ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.thumbnail-box ul li {
width: 80%;
height: 240px;
margin: 20px;
overflow: hidden;
border: 1px solid transparent;
background: rgba(204, 204, 204, 0.3);
opacity: 0.4;
transition: all 0.5s;
}
.thumbnail-box ul .lishow {
border: 1px solid rgb(241, 110, 23);
opacity: 0.95;
}
.thumbnail-box ul li:hover {
opacity: 1;
}
.thumbnail-box ul li img {
height: 100%;
}
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({
el: '#app',
data: {
src: ['./images/1.jpeg', './images/2.jpg', './images/3.jpeg', './images/4.jpg',
'./images/5.jpeg', './images/6.jpg', './images/7.jpeg', './images/8.jpg',
'./images/9.jpeg', './images/10.jpg', './images/11.jpeg', './images/12.jpg', './images/13.jpeg',
'./images/14.jpeg', './images/15.jpeg', './images/16.jpeg'
],
liheight: 0,
bigimg: ''
},
methods: {
//判断滚动方向，因为此demo中只有四页，故边界处理为 0 与 3
onScroll(e) {
let delta = e.deltaY; //firefox使用deltaY:下3上-3,其他浏览器使用wheelDelta:下-120上120//下滚
let scroll = this.$refs.scroll
let compen = scroll.offsetHeight - this.$refs.scrollbox.offsetHeight
// console.log(compen)
// console.log(scroll)
if (delta > 0) {
if (this.liheight + 1 < this.src.length - 1) {
this.liheight = this.liheight + 1
scroll.style.transform = 'translateY(-' + (compen / this.src.length - 1) * this.liheight + 'px)'
} else {
scroll.style.transform = 'translateY(-' + compen + 'px)'
}
}
//上滚
if (delta < 0) {
if (this.liheight > 0) {
this.liheight = this.liheight - 1
scroll.style.transform = 'translateY(-' + (compen / this.src.length - 1) * this.liheight + 'px)'
}
// console.log('上滚');
}
},
imgshow(a) {
let scrollli = this.$refs.scroll.querySelectorAll('li')
scrollli.forEach(element => {
element.classList.remove('lishow')
});
scrollli[a].classList.add('lishow')
// console.log(a)
this.bigimg = this.src[a]
this.bigshow(a)
},
bigshow(a) {
let bigimg = this.$refs.bigimg
bigimg.style.transform = 'translateX(-' + a * 820 + 'px)'
let pictures = this.$refs.pictures
pictures.style.opacity = 0
for (let index = 0; index <= 100000; index++) {
setTimeout(() => {
pictures.style.opacity = index * 0.00001
}, 1000)
}
pictures.innerText = 'pictures ' + (a + 1)
}
},
mounted() {
this.imgshow(0)
},
})
发表评论 (审核通过后显示评论)：