jquery案例实现广告的自动显示与隐藏
2020-01-16 本文已影响0人
Kkite
本篇博文为一个简单的运用jquery中的事件绑定与定时器结合的案例，实现图片的显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>广告的自动显示与隐藏</title>
<script src="js/jquery-3.2.1.js"></script>
<script>
/*
需求：
1.当页面加载完，3秒后。自动显示广告
2.广告显示5秒后，自动消失
分析：
1.使用定时器来完成。setTimeout（执行一次定时器）
2.分析发现jquery的动画效果其实就是控制display
3.使用 show/hide方法来完成广告的显示
*/
//入口函数
$(function(){
// 定义定时器，调用adShow方法 3秒后执行一次
setTimeout(adShow,3000);
// 定义一个定时器，调用adHide方法，8秒后执行一次
setTimeout(adHide,8000);
})
//显示广告
function adShow(){
//获取广告div，调用显示方法
$("#ad").show("slow");
}
//隐藏广告
function adHide(){
//获取广告div，调用隐藏方法
$("#ad").hide("slow");
}
</script>
</head>
<body>
<!-- 整体的div -->
<div>
<!-- 广告div -->
<div id="ad" style="display: none;">
<img style="width: 100%;" src="./img/banner_1.jpg" alt="">
</div>
<!-- 下文正部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>
如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，大家也可以分享给需要的人。
如需转载，请注明出处。https://www.jianshu.com/p/f20f22898f55
