uni-app 之轮播图片卡片

忘是亡心i 2023-10-15 16:44 23阅读 0赞

uni-app 之 轮播图片卡片

<template>
        <view>
    
            
            <div class="buy-back-3">
                <div class="introduce-box">
                    <label>检测案例</label>
                </div>
    
                <div id="container">
                    <div id="photo" class="demo-photo">
                        <img v-for="(item , index) in data" :key="id" :src="item.url" />
                    </div>
                </div>
            </div>
    
        </view>
    </template>
    
    
    <script>
        export default {
            data() {
                return {
                    // checkDemo: [],
    
                    // {
                    //  "code": "0",
                    //  "message": null,
                    //  "fullStackTrace": null,
                    data: [{
                            "id": 0,
                            "name": "",
                            "url": "https://file.wzyanche.com/baidu/check-demo/1.jpg"
                        },
                        {
                            "id": 1,
                            "name": "",
                            "url": "https://cdn.uviewui.com/uview/swiper/swiper2.png"
                        },
                        {
                            "id": 2,
                            "name": "",
                            "url": "https://cdn.uviewui.com/uview/swiper/swiper3.png"
                        }
                    ]
                    // },
    
                }
            },
    
        }
    </script>
    
    
    
    <style>
        #photo {
            width: 8000px;
            animation: switch 40s ease-out infinite;
        }
    
        #photo>img {
            float: left;
            width: 380px;
            height: 250px;
            margin: 10px;
            border-radius: 10px;
        }
    
        @keyframes switch {
            0% {
                margin-left: 0;
            }
    
            5% {
                margin-left: -400;
            }
    
            10% {
                margin-left: -800px;
            }
    
            15% {
                margin-left: -1200px;
            }
    
            20% {
                margin-left: -1600px;
            }
    
            25% {
                margin-left: -2000px;
            }
    
            30% {
                margin-left: -2400px;
            }
    
            35% {
                margin-left: -2800px;
            }
    
            40% {
                margin-left: -3200px;
            }
    
            45% {
                margin-left: -3600px;
            }
    
            50% {
                margin-left: -4000px;
            }
    
            55% {
                margin-left: -4400px;
            }
    
            60% {
                margin-left: -4800px;
            }
    
            65% {
                margin-left: -5200px;
            }
    
            70% {
                margin-left: -5600px;
            }
    
            75% {
                margin-left: -6000px;
            }
    
            80% {
                margin-left: -6400px;
            }
    
            85% {
                margin-left: -6800px;
            }
    
            90% {
                margin-left: -7200px;
            }
    
            95% {
                margin-left: -7600px;
            }
    
            100% {
                margin-left: -7650px;
            }
        }
    </style>

...