脚本宝典收集整理的这篇文章主要介绍了vue 实现的走马灯，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一个签到活动的有 一个走马灯效果。
项目基于vue的技术栈。所以只能用vue来实现了。
效果图如下：

大致思路

通过每个li的index值 让其背景变色

html

<ul class="lottery" v-if="userData.activity">
    <li v-if="userData.activity" v-for="(item ,index ) in userData.activity.lottery_reward" :class="{act : index == actIndex}">   
        <span>{{userData.activity.lottery_reward[index].short_name}}</span>
    </li>
    <li class="game-btn" v-on:click.once="gameBegin">
        <p>点击抽奖</p>
    </li>
</ul>

css

.lottery{
    height:530px;display: flex;flex-flow: row wrap;justify-content: space-between;
    padding:40px 30px;background:#fff;border-radius: 0 0 18px 18px;
    li{
        color:#333;width:130px;height: 130px;border:1px solid rgba(204,204,204,1);
        &:nth-of-type(5){
            position: relative;top:150px;
        }
        &:nth-of-type(8){
            position: relative;
            left:160px;
        }
                                 
    }
    .game-btn{
            position: relative;
            top:-150px;
            left:-160px;
            background-color:rgba(255,99,99,1);
            p{
                width:110px;
                height:110px; 
                font-size:28px;        
            }
        }
    li.act{
        background:rgba(255, 99, 99, 0.2);
        
    }
}

通过css改变每块的位置。每块li转起来的下标 为0, 1, 2, 5, 7, 4, 6, 3 。

JS

export default {
    data () {
        return {
            i:0,
            count:0,
            actIndex:0,
            circleNum : [0, 1, 2, 5, 7, 4, 6, 3],//转动顺序
        }
    },
    methods : {
        gameBegin () {
            getExpogiftLottery({activity_id:this.userData.activity.sign_activity_id}).then( res => {
               this.go();
            })              
        },
        go () {
            var EndCount = 1000;      
            setTimeout(()=>{
                this.i++;
                if(this.i >=8 ) this.i = 0;
                this.actIndex = this.circleNum[this.i];                    
                if(this.count <= EndCount) {
                    this.go()
                }else{
                    alert('开奖')
                }
            },100)
        }
    }
    
}

停到指定位置这个功能没做，只是转够圈数，用户不知道停在哪，直接跳出结果。
当点击开始按钮后，向服务端发送请求，请求成功后，调用go()函数（开始转）。
每100ms actIndex 是变化的，可能是[0, 1, 2, 5, 7, 4, 6, 3]中的某一个，且让这个值作为li的下标点亮它。

脚本宝典总结

以上是脚本宝典为你收集整理的vue 实现的走马灯全部内容，希望文章能够帮你解决vue 实现的走马灯所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。