使用HBuilder可以使用以下步驟制作輪播圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css">
<style>
/* 添加樣式，設置容器大小 */
.swiper-container {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<!-- 創建一個容器 -->
<div class="swiper-container">
<!-- 添加輪播圖內容 -->
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg" alt="圖片1"></div>
<div class="swiper-slide"><img src="image2.jpg" alt="圖片2"></div>
<div class="swiper-slide"><img src="image3.jpg" alt="圖片3"></div>
</div>
<!-- 添加分頁器 -->
<div class="swiper-pagination"></div>
</div>
<!-- 引入JavaScript文件 -->
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
<script>
// 初始化Swiper對象
var mySwiper = new Swiper('.swiper-container', {
// 設置輪播的方向
direction: 'horizontal',
// 設置自動切換
autoplay: true,
// 設置切換的速度
speed: 1000,
// 設置分頁器
pagination: {
el: '.swiper-pagination',
clickable: true
}
});
</script>
</body>
</html>
在項目中創建一個文件夾，命名為images，并在其中放置輪播圖所需的圖片。確保圖片文件名與HTML文件中的<img>標簽中的src屬性對應。
在HBuilder中打開index.html文件，即可看到制作好的輪播圖效果。
