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