vue 实现图片组切换效果
实现这个效果
这就普通的移动过渡，一般是外部固定一个div，然后宽度高度写死，overflow设置auto或者scroll，内部的盒子根据内容撑开，宽度超出外部固定的盒子，出现横向的滚动条，然后左右按钮控制它的scrollLeft，达到移动的目的，过渡效果就加给它的这个变化上面，不过手写还是挺麻烦的，很多ui库可以提供类似的东西，可以多查查资料
你可真小气，点个赞还给取消了
诺，给你个网址，这种轮播效果，真的网上一堆，https://www.swiper.com.cn/
写了个简单版的
<!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>Document</title>
</head>
<body>
<div class="scroll">
<div class="icon-left" onclick="scrollleft()"></div>
<div class="cards">
<div class="card">
<div class="header">
<img src="https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/long_xiaodu.0f9fb7f.png">
</div>
<h2>小度</h2>
<p>
小度在家是百度AI首款智能视频音箱，基于百度智能云云手机为用户提供海量应用，涵盖视频通话，听歌追剧，早教陪伴，生活助手，智能家控等功能，为用户提供更好的AI体验。
</p>
</div>
<div class="card">
<div class="header">
<img src=" https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/long_xiecheng.30c6ef0.png">
</div>
<h2>携程</h2>
<p>
携程APP作为“共同承担社会责任，服务保障持续升级”的手机客户端，基于百度智能云云手机，对发布在App中的的黄暴政治等不良的信息情况，进行批量监管和存证，对呈现给用户的内容高效监管。
</p>
</div>
<div class="card">
<div class="header">
<img src="https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/long_beike.1800f98.png"
alt="">
</div>
<h2>贝壳</h2>
<p>
贝壳找房是国内高品质的房源平台。基于百度智能云云手机，贝壳找房着力于构建安全、高质、高效的客户服务和营销管理平台。
</p>
</div>
<div class="card">
<div class="header">
<img src=" https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/long_huya.a0e48e4.png"
alt="">
</div>
<h2>虎牙</h2>
<p>
虎牙直播是中国领先的游戏直播平台之一
，覆盖超过3300款游戏，并已逐步涵盖娱乐、综艺、教育、户外、体育等多元化的互动直播内容。基于百度智能云云手机，虎牙直播着力于构建起无需下载、即点即玩的高质量云游戏平台，为玩家提供流畅便捷的游戏体验。
</p>
</div>
<div class="card">
<div class="header">
<img src="https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/long_longxi.7bf329f.png">
</div>
<h2>珑玺</h2>
<p>
广州珑玺是一家快速成长的以技术见长的数字智能营销公司。基于百度智能云云手机，珑玺实现了平台广告的监播自动化和实时化，实现了人效比十倍量级的提升，报告的即时性和频次都得到巨大的提升。
</p>
</div>
<div class="card">
<div class="header">
<img src="https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/long_xiaodu.0f9fb7f.png">
</div>
<h2>小度</h2>
<p>
小度在家是百度AI首款智能视频音箱，基于百度智能云云手机为用户提供海量应用，涵盖视频通话，听歌追剧，早教陪伴，生活助手，智能家控等功能，为用户提供更好的AI体验。
</p>
</div>
<div class="card">
<div class="header">
<img src=" https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/long_xiecheng.30c6ef0.png">
</div>
<h2>携程</h2>
<p>
携程APP作为“共同承担社会责任，服务保障持续升级”的手机客户端，基于百度智能云云手机，对发布在App中的的黄暴政治等不良的信息情况，进行批量监管和存证，对呈现给用户的内容高效监管。
</p>
</div>
<div class="card">
<div class="header">
<img src="https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/long_beike.1800f98.png"
alt="">
</div>
<h2>贝壳</h2>
<p>
贝壳找房是国内高品质的房源平台。基于百度智能云云手机，贝壳找房着力于构建安全、高质、高效的客户服务和营销管理平台。
</p>
</div>
</div>
<div class=" icon-right" onclick="scrollright()"></div>
</div>
</body>
<script>
function scrollleft() {
const cardNum = document.querySelectorAll('.card').length
if (document.querySelector('.cards').scrollLeft > 0) {
let time = 0
const set = setInterval(() => {
time++
document.querySelector('.cards').scrollLeft -= 36
if (time == 10) {
clearInterval(set)
}
}, 10)
} else {
document.querySelector('.cards').scrollLeft = cardNum * 360 - 1080
let time = 0
const set = setInterval(() => {
time++
document.querySelector('.cards').scrollLeft -= 36
if (time == 10) {
clearInterval(set)
}
}, 10)
}
}
function scrollright() {
const cardNum = document.querySelectorAll('.card').length
if (document.querySelector('.cards').scrollLeft < cardNum * 360 - 1080) {
let time = 0
const set = setInterval(() => {
time++
document.querySelector('.cards').scrollLeft += 36
if (time == 10) {
clearInterval(set)
}
}, 10)
} else {
document.querySelector('.cards').scrollLeft = 0
let time = 0
const set = setInterval(() => {
time++
document.querySelector('.cards').scrollLeft += 36
if (time == 10) {
clearInterval(set)
}
}, 10)
}
}
</script>
<style>
body {
margin: 0;
height: 100vh;
background-color: #FAFBFF;
display: flex;
align-items: center;
justify-content: center;
}
.scroll {
width: 1240px;
height: 440px;
padding-top: 20px;
display: flex;
align-items: center;
overflow: hidden;
}
.icon-left {
width: 100px;
height: 100px;
background-size: cover;
background-image: url(https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/icon_left.53cbadc.png);
}
.icon-right {
width: 100px;
height: 100px;
background-size: cover;
background-image: url(https://yunapp-static.cdn.bcebos.com/bd-yunapp-h5/static/img/icon_right.c5cb5b2.png);
}
.cards {
display: flex;
width: 1200px;
overflow: auto;
}
.card {
padding: 20px;
/* min-width: 340px; */
height: 400px;
margin: 10px;
background-color: #fff;
box-shadow: 0 6px 20px 0 rgb(222 222 222 / 15%);
}
.header {
width: 300px;
height: 160px;
background-color: #FAFBFF;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 160px;
height: 60px;
}
h2 {
text-align: center;
}
</style>
</html>