uni-app 之图片匀速滑动轮播，animation动画

客官°小女子只卖身不卖艺 2023-10-15 16:46 108阅读 0赞

uni-app 之 图片匀速滑动轮播，animation动画

<template>
        <view>
    
            
            <div class="all-checker">
                <div style="padding-top: 20px;">
                    <label>加个标题，嘎嘎嘎</label>
                </div>
    
                <div class="container">
                    <div class="slider">
                        <img src="static/imgBgmm.jpg" alt="">
                        <img src="static/imgBgmm.jpg" alt="">
                    </div>
                </div>
            </div>
    
        </view>
    </template>
    
    
    <script>
        export default {
            data() {
                return {
    
                }
            },
        }
    </script>
    
    
    <style lang="scss">
        /**
        * 图片滚动
        */
        .container {
            width: 100%;
            height: 260px;
            /* 图片高度 */
            overflow: hidden;
        }
    
        .slider {
            width: 200%;
            /* 图片总宽度的两倍 */
            height: 100%;
            display: flex;
            animation: scroll 10s linear infinite;
            /* 设置动画 */
        }
    
        .slider img {
            width: 50%;
            /* 单个图片的宽度 */
            height: 100%;
            object-fit: cover;
        }
    
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
    
            100% {
                transform: translateX(-50%);
                /* 每次滚动一个图片的宽度 */
            }
        }
    
        /**
        * 案例图片滚动
        */
        #container {
            /*  width: 400px;
                height: 300px;
                overflow: hidden; 
            */
            width: 96%;
            margin: 3% 10px;
            overflow: hidden;
        }
    </style>