隨著HTML5的普及，開發(fā)人員們憑借著HTML5新增的特性，可以輕松開發(fā)出許多更加優(yōu)秀的網(wǎng)頁應(yīng)用程序。其中，HTML5的圖片滾動(dòng)功能備受開發(fā)者青睞，前端工程師們利用HTML5的特性，打造出了許多兼容各種瀏覽器，各種設(shè)備的圖片滾動(dòng)代碼。
為了幫助廣大前端開發(fā)工程師更加輕松地開發(fā)HTML5圖片滾動(dòng)功能，現(xiàn)在涌現(xiàn)了許多HTML5圖片滾動(dòng)代碼生成器。這些代碼生成器可以幫助我們快速生成需要的代碼，大大縮短了開發(fā)周期，提升了開發(fā)效率。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 圖片滾動(dòng)代碼生成器</title>
<meta charset="utf-8">
<style type="text/css">
#scrollBox{width:800px;height:300px;overflow:hidden;margin:0 auto;}
#scrollBox img{width:200px;height:300px;float:left;}
</style>
</head>
<body>
<div id="scrollBox">
<img src="image1.jpg"/>
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</div>
<script type="text/javascript">
var scrollBox = document.getElementById("scrollBox");
var speed = 1;
var currentPos = 0;
var timer, scrollTo;
function scroll(){
currentPos += speed;
if(currentPos >= 200){
currentPos = -800;
}
scrollBox.style.left = currentPos + "px";
timer = setTimeout(scroll, 10);
};
setTimeout(scroll, 1000);
</script>
</body>
</html>如上所示的代碼段，就是一個(gè)簡(jiǎn)單的HTML5圖片滾動(dòng)代碼。我們可以通過修改變量的值，自定義圖片滾動(dòng)的速度，滾動(dòng)的方向和圖片的數(shù)量、大小等屬性。在這里，我們通過“setTimeout()”函數(shù)和“setTimeout()”函數(shù)的調(diào)用，實(shí)現(xiàn)了HTML5圖片的自動(dòng)滾動(dòng)效果。同時(shí)，我們還需要通過CSS代碼規(guī)定圖片框的大小和滾動(dòng)圖片“img”的大小并浮動(dòng)到左側(cè)，以使圖片能夠按照我們所預(yù)期的方式進(jìn)行滾動(dòng)。