以下是一个自动轮播图片，每次展示三张的示例代码：
HTML部分：
```
```
CSS部分：
```
.slider {
width: 600px;
height: 400px;
overflow: hidden;
}
.slider ul {
list-style: none;
margin: 0;
padding: 0;
width: 300%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slider li {
float: left;
width: 33.33%;
height: 100%;
text-align: center;
font-size: 30px;
line-height: 400px;
background-color: #ccc;
}
```
JavaScript部分：
```
new Vue({
el: '#app',
data: {
picList: ['pic1', 'pic2', 'pic3', 'pic4', 'pic5'],
curList: [],
curIndex: 0,
timer: null
},
mounted() {
this.startAutoPlay();
},
methods: {
startAutoPlay() {
this.timer = setInterval(() => {
this.next();
}, 2000);
},
stopAutoPlay() {
clearInterval(this.timer);
},
previous() {
if (this.curIndex > 0) {
this.curIndex--;
} else {
this.curIndex = this.picList.length - 3;
}
this.curList = this.picList.slice(this.curIndex, this.curIndex + 3);
},
next() {
if (this.curIndex < this.picList.length - 3) {
this.curIndex++;
} else {
this.curIndex = 0;
}
this.curList = this.picList.slice(this.curIndex, this.curIndex + 3);
}
},
watch: {
curIndex() {
const slider = this.$el.querySelector('.slider ul');
slider.style.transform
AI助手
资讯
常用工具
网站模板