js+html+CSS+jquery实现无限滚动轮播列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限滚动轮播</title>
<style>
.carousel {
overflow: hidden;
white-space: nowrap;
}
.carousel-item {
display: inline-block;
margin-right: 10px;
}
.carousel-image {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="carousel">
<!-- 这里是通过循环生成的轮播项 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 假设有一个图片数组
var images = [
'http://placekitten.com/100/100',
'http://placekitten.com/101/100',
// ... 更多图片
];
// 生成轮播内容的函数
function generateCarouselItems() {
var html = '';
for (var i = 0; i < images.length; i++) {
html += '<div class="carousel-item"><img class="carousel-image" src="' + images[i] + '"></div>';
}
// 将生成的轮播项 HTML 内容追加到 .carousel 元素中
$('.carousel').append(html);
}
// 调用函数生成轮播项
generateCarouselItems();
</script>
</body>
</html>这个简单的示例展示了如何使用jQuery和HTML结构来生成一个无限滚动的轮播列表。在实际应用中，你可能需要添加更多的功能，比如自动滚动、用户交互等。
评论已关闭