uni-app 之 轮播图片卡片

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>

...