uniapp中实现走马灯的效果

最新推荐文章于 2025-10-10 16:15:30 发布

原创最新推荐文章于 2025-10-10 16:15:30 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

本文将介绍如何在uniapp中创建走马灯效果，通过结合HTML、CSS及uniapp的特性和组件，详细讲解布局设计、动画实现以及交互逻辑，助你轻松打造动态轮播展示。

<template>
    <view class="roulette-container">
        <view class="roulette-container-open"></view>
        <view class="item-case-goods">
            <view class="item-small-case" v-for="item in itemImgs" :key="item.id">
                <image :src="item.url" class="item-img"></image>
            </view>
        </view>
    </view>
    
     

</template>
<script>
    export default{
        data(){
            return{
                itemImgs: [{
                      id: 1,
                      url:'../../static/gd/1.jpg'
                    }, {
                      id: 2,
                      url:'../../static/gd/2.jpg'
                    }, {
                      id: 3,
                      url:'../../static/gd/3.jpg'
                    }, {
                      id: 4,
                      url:'../../static/gd/4.jpg'
                    }, {
                      id: 5,
                      url:'../../static/gd/5.jpg'
                    }, {
                      id: 6,
                      url:'../../static/gd/6.jpg'
                    }, {
                      id: 7,
                      url:'../../static/gd/7.jpg'
                    }, {
                      id: 8,
                      url:'../../static/gd/8.jpg'
                    }, {
                      id: 9,
                      url:'../../static/gd/9.jpg'
                },{
                      id: 1,
                      url:'../../static/gd/1.jpg'
                    }, {
                      id: 2,
                      url:'../../static/gd/2.jpg'
                    }, {
                      id: 3,
                      url:'../../static/gd/3.jpg'
                    }, {
                      id: 4,
                      url:'../../static/gd/4.jpg'
                    }, {
                      id: 5,
                      url:'../../static/gd/5.jpg'
                    }, ]
            }
        },
    }
</script>
<style lang="scss">
    .roulette-container{
        position: relative;
        margin-top:100px; 
        height: 100px;
        .roulette-container-open{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border: 2px solid red;
            width: 75px;
            height: 100px;
            z-index: 2;
        }
        .item-case-goods{
            position: relative;
            display: flex;
            flex-wrap: nowrap;
            height: 100px;
            animation: mymove 2s 2 linear;
            .item-small-case{
                flex-shrink: 0;
                width: 75px;
                height: 100%;
                .item-img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        
        .btn{
            margin-top: 50px;
        }
        @-webkit-keyframes mymove {
            from {
                left: 0px;
            }
            to {
                transform: translate(-675px) // 总共14张图片，只让其移动9张图片
            }
        }
        
    }

        
</style>