jquery案例实现广告的自动显示与隐藏 文化 2020-01-18 共1个回答 jquery案例实现广告的自动显示与隐藏 本篇博文为一个简单的运用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的动画效果其实就是控制display3.使用 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