如圖所示，點擊抽獎按鈕，如何讓圖片及文字快速滾動，點擊停止或者間隔幾秒后停止滾動
測驗資料
<template>
<div id="beij">
<div class="home0">
<div v-for="(item,index) in userData" :key="index" class="home6">
<div v-if="index<input" class="home7">
<div class="home1" align="center">
<img class="home2" :src="https://bbs.csdn.net/topics/item.headimgurl">
<h3 class="home3">{{item.nickname}}</h3>
</div>
</div>
</div>
</div>
<div class="home4">
<el-input v-model="input" placeholder="請輸入抽獎人數"></el-input>
<el-row class="home5">
<el-button type="success" @click="goFome">開始抽獎</el-button>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
isCollapse: true,
input:'',
arrays:[],
userData:[
{
nickname: "會叫的1",
headimgurl:require("../assets/home1.jpg"),
},
{
nickname: "會叫的2",
headimgurl:require("../assets/home1.jpg"),
},
{
nickname: "會叫的3",
headimgurl:require("../assets/home1.jpg"),
},
{
nickname: "會叫的4",
headimgurl:require("../assets/home1.jpg"),
},
{
nickname: "會叫的5",
headimgurl:require("../assets/home1.jpg"),
},
{
nickname: "會叫的6",
headimgurl:require("../assets/home1.jpg"),
},
{
nickname: "會叫的7",
headimgurl:require("../assets/home1.jpg"),
},
{
nickname: "會叫的8",
headimgurl:require("../assets/home1.jpg"),
},
{
nickname: "會叫的9",
headimgurl:require("../assets/home1.jpg"),
},
{
nickname: "會叫的0",
headimgurl:require("../assets/home1.jpg"),
},
],
};
},
methods: {
goFome(){
for (let i =0; i < this.userData.length;i++){
setInterval(this.arrays = this.userData[i],3000)
window.console.log(this.arrays)
}
},
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/106713.html
標籤：JavaScript