要實現圖片滾動,你可以使用hbuilder提供的各種UI組件和JS方法。下面是一種常見的實現方式:
<div id="scrollContainer" style="width: 100%; height: 200px; overflow: hidden;">
<ul id="imageList" style="width: 300%; height: 100%;">
<li><img src="image1.jpg" style="width: 33%; height: 100%;"></li>
<li><img src="image2.jpg" style="width: 33%; height: 100%;"></li>
<li><img src="image3.jpg" style="width: 33%; height: 100%;"></li>
</ul>
</div>
setInterval()
方法定時更新容器的scrollLeft
屬性,實現滾動效果。var scrollContainer = document.getElementById("scrollContainer");
var imageList = document.getElementById("imageList");
var scrollSpeed = 2; // 滾動速度,可根據需要調整
setInterval(function() {
scrollContainer.scrollLeft += scrollSpeed;
if (scrollContainer.scrollLeft >= imageList.offsetWidth / 3) {
scrollContainer.scrollLeft = 0;
}
}, 50); // 每隔50毫秒滾動一次,可根據需要調整
這樣就可以實現圖片在容器中的水平滾動效果了。你可以根據實際情況調整滾動容器的寬度和高度、圖片的寬度和高度以及滾動速度等參數來適應你的需求。