jQuery应用实例1：定时弹出图片

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

以前用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>