这种轮播图怎么实现呢？-灵析社区
复古直男这种中间高亮选中，类似向上滚动的，轮播图
喵酱魔法师Demo:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241208/6e430965eb3e9950d49c7967bf09cebb.png)
在根据需要改一下就好了
{{ lastData }}
{{ nowData }}
{{ nextData }}
export default {
name: 'HelloWorld',
data() {
return {
scrollList: [
"11111111", "22222222222", "3333333333", "4444444444444",
"555555555", "6666666666", "7777777777777", "888888888888"
],
top: "",
scrollIndex: 0,
p: "",
lastData: "",
nowData: "",
nextData: ""
}
},
mounted() {
this.goScroll()
//监听鼠标滚动事件
window.addEventListener('mousewheel', this.mouseWheelScroll);
},
methods: {
goScroll() {
clearInterval(this.p);
this.setData(this.scrollIndex);
this.continueScroll();
this.p = setInterval(() => {
this.setData(this.scrollIndex);
this.continueScroll();
}, 1000);
},
//给文字滚动赋值
setData(_index) {
var lastIndex = _index == 0 ? this.scrollList.length - 1 : _index - 1;
this.lastData = this.scrollList[lastIndex];
this.nowData = this.scrollList[_index];
var nextIndex = _index == this.scrollList.length - 1 ? 0 : _index + 1;
this.nextData = this.scrollList[nextIndex];
},
//滚动下标处理 每次加一
continueScroll() {
var _index = this.scrollIndex;
var nextIndex = _index
img {
width: 30px;
height: 30px;
border-radius: 50%;
vertical-align: middle;
margin-right: 20px
}
ul {
position: relative;
color: #ff4d51;
}
li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 80%;
height: 60px;
line-height: 60px;
text-align: left;
margin: 0;
font-size: 14px
}
.scroll {
height: 180px;
overflow: hidden;
font-size: 0px;
position: relative;
text-align-last: center;
width: 300px;
margin: 0 auto;
}
.transition {
transition: top 0.5s
}
.lastDataStyle {
color: dimgrey;
transform: rotateX(45deg);
}
.nowDataStyle {
color: #0000FE;
font-weight: bold;
font-size: 20px;
}
.nextDataStyle {
color: dimgrey;
transform: rotateX(-45deg);
}
«"https://blog.csdn.net/qq_35131811/article/details/123278565" (https://link.segmentfault.com/?enc=O6HI%2BJKEosj6KW4yhgunUQ%3D%3D.z0Sjg6314Ev2TtA24lQfbiEZuuRGYzt%2FahEaUVfO0d%2FU%2Fki0Lk2%2F0wdlHycQHG4YLE7nZ2QmgeXJAzpnCDUXrQ%3D%3D)»