1. 程式人生 > >JavaWeb03-HTML篇筆記(二)

JavaWeb03-HTML篇筆記(二)

Java

1.1 案例一:使用JS完成圖片的輪播的效果:1.1.1 需求:
技術分享圖片
1.1.2 分析:1.1.2.1 技術分析:
【JS中的Window對象的定時的操作】

  • 設置定時的方法
    技術分享圖片
  • 清除定時的方法
    技術分享圖片
    1.1.2.2 步驟分析:
    【步驟一】創建一個HTML文件
    【步驟二】當頁面加載的時候開始計時.使用onload事件.
    【步驟三】編寫onload事件觸發的函數.
    【步驟四】獲得操作圖片的控制權.
    【步驟五】修改圖片的src的屬性.
    1.1.3 代碼實現:
<script>
window.onload = function(){
// 設置定時:
window.setInterval("changeImg()",5000);
}
var i = 1;
function changeImg(){
i++;
// 獲得圖片的控制權:
if(i > 3){
i=1;
}
var img1 = document.getElementById("img1");
img1.src="../img/"+i+".jpg";
}
</script>

JavaWeb03-HTML篇筆記(二)