HTML滾動圖片代碼簡單教程
在網頁設計中，滾動圖片是很常見的元素。它可以吸引用戶的注意力，增加頁面的活力。本篇教程將簡單介紹如何使用HTML代碼實現滾動圖片效果。
首先，我們需要一些圖片來展示。假設我們有三張圖片，命名為pic1.jpg、pic2.jpg、pic3.jpg，并將它們存放在同一個文件夾中。
然后，我們需要在HTML中創建一個容器，用于顯示圖片。我們可以使用\
標簽來創建一個容器。
<div id="scroll" style="width:300px;height:200px;overflow:hidden;"> <img src="pic1.jpg" alt="pic1"> <img src="pic2.jpg" alt="pic2"> <img src="pic3.jpg" alt="pic3"> </div>在上面的代碼中，我們創建了一個寬度為300px，高度為200px的容器，并將其overflow屬性設置為hidden，這樣當圖片超出容器邊界時，就不會顯示。 接下來，我們需要編寫一些CSS樣式來實現滾動效果。
<style>
#scroll img{
height: 200px;
float: left;
}
</style>在這段樣式中，我們將圖片的高度設置為200px，并使用float屬性左浮動。這樣，當圖片超出容器邊界時，它就會向左滾動，并且從右側重新進入容器。
最后，我們需要使用JavaScript來控制滾動。我們可以使用定時器來實現滾動動畫。<script>
var i = 0;
setInterval(function(){
if(i%3 == 0){
document.getElementById("scroll").style.marginLeft = "0px";
}
else if(i%3 == 1){
document.getElementById("scroll").style.marginLeft = "-300px";
}
else{
document.getElementById("scroll").style.marginLeft = "-600px";
}
i++;
}, 2000);
</script>在這段代碼中，我們使用一個變量i來記錄滾動次數。每隔2秒鐘，定時器會執行一次回調函數。在回調函數中，我們通過修改容器的marginLeft屬性來實現滾動動畫。當i為0時，容器的marginLeft為0，顯示第一張圖片。當i為1時，容器的marginLeft為-300px，滾動到第二張圖片。當i為2時，容器的marginLeft為-600px，滾動到第三張圖片。然后，i重新設置為0，滾動從第一張圖片重新開始。
到此為止，我們已經完成了滾動圖片效果的實現。將以上代碼放在HTML文件中，并保存為.html文件，即可在瀏覽器中運行。上一篇jquery 選中第一個
下一篇ios開發和java