分別使用js和JQuery實現html首頁圖片輪播以及廣告圖片定時彈出
阿新 • • 發佈：2018-12-10
主要使用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>