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

效果图：示例：

<!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为5str+=`<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>

希望可以帮到大家。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/327537.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！