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

jun_tong

已于 2023-09-06 15:10:02 修改

阅读量717

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uni-app html

于 2023-09-05 09:41:50 首次发布

本文链接：https://blog.youkuaiyun.com/jun_tong/article/details/132685105

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%;
        d