主要使用setInterval方法設置更新週期,clearInterval清除週期。(如果不清除會一直週期循環執行下去,而setTimeout只是在指定時間後執行一次,這裏完全可以替換爲setTimeout方法)
一、js首頁輪播
第一步:確定事件(onload)併爲其綁定一個函數
瀏覽器是邊加載邊執行的,先加載head 再加載body。瞭解body的onload事件的執行時間是非常重要的。onload事件是在網頁加載完畢時執行的。當我們在JavaScript中想要操作某元素時而此元素還沒有加載完成(即沒有這個元素),就會出現此元素沒定義。在body中添加onload事件是指所有的元素都加載完成時觸發此事件。而元素中的onload事件是指此元素加載完成時觸發。所以操作代碼最好放在onload事件中。onload()此事件只能寫一次並且放到body標籤中。
第二步:書寫綁定的這個函數
第三步:書寫定時任務(setInterval)
第四步:書寫定時任務裏面的函數
第五步:通過變量的方式,進行循環(獲取輪播圖的位置,並設置 src 屬性)
<script type="text/javascript">
function init() {
//書寫輪播圖片顯示的定時操作
setInterval("changeImage()",3000);
}
//書寫函數
var i = 0;
function changeImage() {
i++;
//獲取圖片位置並設置src屬性值
document.getElementById("images").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
<body onload="init()">
<!-- 輪播圖 -->
<div id="lunbo">
<img alt="加載中" src="../img/1.jpg" width="100%" id="images">
</div>
</body>
二、js廣告圖片定時彈出
第一步:在頁面指定位置隱藏一個廣告圖片(使用 display 屬性的 none 值)
第二步:確定事件(onload)併爲其綁定一個函數
第三步:書寫這個函數(設置一個顯示圖片的定時操作)
第四步: 書寫定時器中的函數(獲取廣告圖片的位置並設置屬性style的display值block)
第五步:清除顯示圖片的定時操作()
第六步:書寫隱藏圖片的定時操作
第七步:書寫定時器中的函數(獲取廣告圖片的位置並設置屬性 style 的 display 值 none)
第八步:清除隱藏圖片的定時操作()
html
<body onload="init()">
<img id="imgAd" alt="" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" style="display: none">
js
function init() {
//設置顯示廣告圖片的定時操作
time = setInterval("showAd()", 3000);
}
//書寫函數
function showAd() {
//獲取圖片廣告位置
var adEle = document.getElementById("imgAd");
//修改圖片廣告屬性讓其顯示
adEle.style.display = "block";
//清除顯示圖片的定時操作
clearInterval(time);
//設置隱藏圖片的定時操作
time = setInterval("hiddenAd()", 3000);
}
function hiddenAd() {
////設置隱藏圖片
document.getElementById("imgAd").style.display = "none";
clearInterval(time);
}
三、JQuery實現首頁輪播和廣告圖片定時彈出
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
time = setInterval("showAd()", 3000);
setInterval("changeImage()", 3000);
});
var i = 0;
function changeImage() {
i++;
//獲取圖片位置並設置src屬性值
$("#images").attr("src","../img/" + i + ".jpg");
if (i == 3) {
i = 0;
}
}
function showAd(){
//獲取圖片廣告位置,修改圖片廣告屬性讓其顯示
$("#imgAd").show();
//清除顯示圖片的定時操作
clearInterval(time);
//設置隱藏圖片的定時操作
time = setInterval("hiddenAd()", 3000);
}
function hiddenAd() {
//設置隱藏圖片
$("#imgAd").hide();
clearInterval(time);
}
</script>