效果图：
示例：
<!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>希望可以帮到大家。
