在js中table表格中进行渲染轮播图

天香自然，地上红豆

于 2024-05-14 21:55:20 发布

阅读量239

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/tianxianghuiwei/article/details/138871870

版权

效果图：示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.6.3.js"></script>
    <style>
        /* 轮播图 */
        .basko {
            width: 100%;
            height: 120px;
            overflow: hidden;
        }

        .bask {
            background-color: #ffffff;
            border-radius: 3px;
            margin-top: 3%;
            display: flex;
            width: 200%; /* 调整为包含所有轮播项目的宽度 */
        }

        .membered {
            width: 100%;
            display: flex;
            overflow: hidden;
            overflow-x: scroll; /* 使用水平滚动来显示轮播项目 */
            scroll-behavior: smooth; /* 平滑滚动效果 */
        }

        .members {
            width: 20%; /* 调整为与.bask相等的宽度 */
            height: 120px;
            margin: 0 7px;
        }

        .members img {
            width: 100%;
            height: 100%;
        }

        .bask {
            animation: notice-animation 3s infinite linear; /* 调整动画为线性循环10秒 */
        }

        @keyframes notice-animation {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
<div class="basko">
    <div class="bask">
        <div class="membered">
            <div class="members">
                <img src="img/20190128183648156.jpg" alt="" />
            </div>
            <!-- 添加更多轮播项目 -->
        </div>
    </div>
</div>
<script>
    fun()
    function fun(){
        let str='';
        for (let i = 0; i < 1; i++) { // 修正5.length为5
            str+=`
            <div class="bask">
                <div class="membered">
                    <div class="members">
                        <img src="img/20190128183648156.jpg" alt="" />
                    </div>
                    <!-- 添加更多轮播项目 -->
                </div>
            </div>
            `
        }
        document.querySelector('.bask').innerHTML += str; // 将生成的轮播项目添加到页面中
    }
</script>
</body>
</html>

希望可以帮到大家。