以前用JS實現的：http://www.cnblogs.com/xuyiqing/p/8373064.html 這裡利用jQuery實現，並且做得更完善： 多種特效，後面的參數是毫秒值： 還有一種方式是toggle，這裡單獨介紹： 這裡可以理解為：display:none的修改為block，disp ...
以前用JS實現的：http://www.cnblogs.com/xuyiqing/p/8373064.html
這裡利用jQuery實現，並且做得更完善：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> $(function() { //1.書寫顯示廣告圖片的定時操作 time = setInterval("showAd()", 2000); }); //2.書寫顯示廣告圖片的函數（各種效果） function showAd() { //3.獲取廣告圖片，並讓其顯示 //$("#img2").show(1000); //這裡是1秒內彈入圖片 $("#img2").slideDown(1000); //這裡是1秒內滑入圖片（自上到下） //$("#img2").fadeIn(4000); //這裡是4秒內圖片逐漸顯示（淡入） //4.清除顯示圖片定時操作 clearInterval(time); //5.設置隱藏圖片的定時操作 time = setInterval("hiddenAd()", 2000); } function hiddenAd() { //6.獲取廣告圖片，並讓其隱藏（也有多種效果） //$("#img2").hide(6000); //這裡是圖片6秒內彈出 $("#img2").fadeOut(6000); //這裡是6秒內圖片淡出 //7.清除隱藏圖片的定時操作 clearInterval(time); } </script> </head> <body> <div> <img src="img/1.jpg" width="100%" style="display: none" id="img2" /> </div> </body> </html>
多種特效，後面的參數是毫秒值：
還有一種方式是toggle，這裡單獨介紹：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>toggle的使用</title> <style> div { border: 1px solid white; width: 500px; height: 350px; margin: auto; text-align: center; } </style> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> $(function() { $("#btn").click(function() { $("#img1").toggle(); //改變顯示狀態 //隱藏則變成顯示，顯示的變成隱藏狀態 }); }); </script> </head> <body> <div> <input type="button" value="顯示/隱藏" id="btn" /><br /> <img src="img/1.jpg" width="100%" height="100%" id="img1" /> </div> </body> </html>
這裡可以理解為：display:none的修改為block，display:block的修改為none
