jQuery實現圖片自動出現消失
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <style> #father{ border: 0px solid red; width: 1300px; height: 2170px; margin: auto; } </style> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ //1.書寫顯示廣告圖片的定時操作 time = setInterval("showAd()",3000); }); //2.書寫顯示廣告圖片的函式 function showAd(){ //3.獲取廣告圖片，並讓其顯示 //$("#img2").show(1000); //$("#img2").slideDown(5000); $("#img2").fadeIn(4000); //4.清除顯示圖片定時操作 clearInterval(time); //5.設定隱藏圖片的定時操作 time = setInterval("hiddenAd()",3000); } function hiddenAd(){ //6.獲取廣告圖片，並讓其隱藏 //$("#img2").hide(); //$("#img2").slideUp(5000); $("#img2").fadeOut(6000); //7.清除隱藏圖片的定時操作 clearInterval(time); } </script> </head> <body onload="init()"> <div id="father"> <!--定時彈出廣告圖片位置--> <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/> </div> </body> </html>