使用JQuery完成定时弹出广告/图片

最新推荐文章于 2020-12-31 15:14:27 发布
最新推荐文章于 2020-12-31 15:14:27 发布
阅读量178 收藏
点赞数
分类专栏： Web 文章标签： JQuery JQ JavaScript JS WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40922845/article/details/102612693
版权

script部分

<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				//1. 书写显示广告的定时器操作
				time = setInterval("showAd()",3000);
			});
			//2. 书写显示广告图片的函数
			function showAd(){
				// 3.获取广告图片,并让其显示
				// $("#img2").show(500);	//普通样式
				// $("#img2").slideDown(1000);	//向下滑入
				$("#img2").fadeIn(500);	//渐入
				// 4.清除显示图片定时操作
				clearInterval(time);
				// 5.设置隐藏图片的定时操作
				time = setInterval("hiddenAd()",3000);
			}
			function hiddenAd(){
				// 6.获取广告图片,隐藏
				// $("#img2").hide();	//普通样式
				// $("#img2").slideUp(1000);	//向上滑出
				$("#img2").fadeOut(500);
				// 7.清除隐藏图片的定时操作
				clearInterval(time);
			}
		</script>
————————————————
版权声明：本文为CSDN博主「艾诺_Aynor」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40922845/article/details/102612693

全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<style type="text/css">
			#father {
				border: 1px solid red;
				width: 1250px;
				height: 1550px;
				/* 外边距 */
				margin: auto;
			}
			#logo{
				border: 1px solid blue;
				width: 1250px;
				height: 50px;
			}
			.top{
				border: 1px solid gold;
				width: 413px;
				height: 50px;
				float: left;
			}
			#menu{
				border: 1px solid blue;
				width: 1250px;
				height: 50px;
				background-color: #000000;
				margin-bottom: 10px;
			}
			ul li{
				display: inline;
				color: white;
			}
			#product{
				border: 1px solid yellow;
				width: 1250px;
				height: 560px;
			}
			#product_top{
				border: 1px solid blue;
				width: 100%;
				height: 50px;
			}
			#product_bottom{
				border: 1px solid black;
				width: 100%;
				height: 500px;
			}
			#product_bottom_left{
				border: 1px solid pink;
				width: 200px;
				height: 500px;
				float: left;
			}
			#product_bottom_right{
				border: 1px solid cadetblue;
				width: 1045px;
				height: 500px;
				float: left;
			}
			#big{
				border: 1px solid black;
				width: 520px;
				height: 250px;
				float: left;
			}
			.small{
				border: 1px solid red;
				width: 172px;
				height: 250px;
				float: left;
				text-align: center;
			}
			/* 清除超链接的下划线 */
			a{
				text-decoration: none;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				//1. 书写显示广告的定时器操作
				time = setInterval("showAd()",3000);
			});
			//2. 书写显示广告图片的函数
			function showAd(){
				// 3.获取广告图片,并让其显示
				// $("#img2").show(500);	//普通样式
				// $("#img2").slideDown(1000);	//向下滑入
				$("#img2").fadeIn(500);	//渐入
				// 4.清除显示图片定时操作
				clearInterval(time);
				// 5.设置隐藏图片的定时操作
				time = setInterval("hiddenAd()",3000);
			}
			function hiddenAd(){
				// 6.获取广告图片,隐藏
				// $("#img2").hide();	//普通样式
				// $("#img2").slideUp(1000);	//向上滑出
				$("#img2").fadeOut(500);
				// 7.清除隐藏图片的定时操作
				clearInterval(time);
			}
		</script>
	</head>
	<body onload="init()">
		<div id="father">
			<!-- 定时广告弹出位置 -->
			<img id="img2" src="../img/合照合照.png" width="100%" style="display: none;">
			
			<!-- Logo -->
			<div id="logo">
				<div class="top">
					<img src="../img/艾诺重工Logo.png" height="46px" >
				</div>
				<div class="top">
						<div class="top">
							<img src="../img/艾诺重工Logo.png" height="46px" >
						</div>
				</div>
				<div class="top">
					<a href="#">登陆</a>
					<a href="#">购物车</a>
					<a href="#">登陆</a>
				</div>
			</div>
			<!-- 导航栏 -->
			<div id="menu">
				<ul>
					 &nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><li style="font-size: 20px;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					 <a href="#"><li>商品</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					 <a href="#"><li>商品</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					 <a href="#"><li>商品</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					 <a href="#"><li>商品</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
					 <a href="#"><li>商品</li></a>
				</ul>
			</div>
			<!-- 轮播图 -->
			<div id="" style="text-align: center;">
				<img src="../img/艾诺重工Logo.png" id="img1">
			</div>
			<!-- 最新商品 -->
			<div id="product">
				<div id="product_top" style="padding-left: 20px; padding-bottom: 25px;">
					<span style="font-size: 25px;">最新商品&nbsp;&nbsp;&nbsp;&nbsp;<img src="../img/艾诺重工Logo.png" ></span>
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
					</div>
					<div id="product_bottom_right">
						<div id="big">
							
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
					</div>
				</div>
			</div>
			<!-- 广告 -->
			<div id="" style="text-align: center;">
				<img src="../img/艾诺重工Logo.png" >
			</div>
			<!-- 热门商品 -->
			<div id="product">
				<div id="product_top" style="padding-left: 20px; padding-bottom: 25px;">
					<span style="font-size: 25px;">最新商品&nbsp;&nbsp;&nbsp;&nbsp;<img src="../img/艾诺重工Logo.png" ></span>
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
					</div>
					<div id="product_bottom_right">
						<div id="big">
							
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
						<div class="small">
							<img src="../img/艾诺重工Logo.png" >
							<a href="#"><br><br><br><p style="color: black;">商品</p><p style="font-size: 15px;">￥199</p> </a>
						</div>
					</div>
				</div>
			</div>
			<!-- 广告 -->
			<div id="" style="text-align: center;">
				<img src="../img/艾诺重工Logo.png" >
			</div>
				<!-- </div>友情链接 -->
				<div id="" style="text-align: center">
					<p>
						<a href="https://www.ww-pass.com/">万物通行官网</a>
						<a href="#">MOFUMOFU手作</a>
						<a href="#">空格科技</a>
					</p>
					<p>
						<a href="#">关于我们</a>
						<a href="#">联系我们</a>
						<a href="#">更多产品</a>
					</p>
				</div>
			</div>
	</body>
</html>




<!-- 	<script>
			function init(){
				//书写轮播图显示的定时操作
				window.setInterval("changeImg()",3000);
			}
			// 书写函数
			var flag = 0;
			function changeImg(){
				flag++;
				if(flag==1){
					document.getElementById("img2").src="../img/艾诺设定.png"
				}
				if(flag==2){
					flag = 0;
					document.getElementById("img2").src="../img/照相.png"
				}
			}
		</script> -->
		
		
	<!-- 	<script type="text/javascript">
			function init(){
				setInterval("changeImg()",3000);
			}
			var flag1 = 0;
			function changeImg(){
				flag++;
				if(flag1==1){
					document.getElementById("img1").src="../../img/艾诺设定.png"
				}
				if(flag1==2){
					flag = 0;
					document.getElementById("img1").src="../../img/照相.png"
				}
			}
		</script> -->
		
		
		<!-- <script type="text/javascript">
			function init(){
				// 1.设置显示广告图片的定时操作
				time = setInterval("showAd()",3000);
			}
			// 2.书写显示广告图片的函数/
			function showAd(){
				// 3.获取广告图片的位置
				var adEle = document.getElementById("img2");
				// 4.修改广告图片元素里面的属性让其显示
				adEle.style.display = "block";
				// 5.清除显示图片的定时操作 不让其每3秒运行一次显示图片的函数
				clearInterval(time);
				//6.设置隐藏图片的定时操作
				time = setInterval("hiddenAd()",3000);
			}
			// 7.书写隐藏广告图片的函数
			function hiddenAd(){
				//8.获取广告图片并设置其Style属性的display值为none
				document.getElementById("img2").style.display="none";
				//9.清除隐藏广告图片的定时操作 不让其每3秒运行一次隐藏图片的函数
				clearInterval(time);
			}
		</script> -->
艾诺_Aynor
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jQuery实现广告的定时弹窗
余木尘的博客
09-02 565
广告样式 <script src="js/jquery-3.4.0.js"></script> <style> div{ width: 500px; height: 500px; background-color: burlywood; di...
jQuery实现弹出广告
哈希不Map的博客
10-21 545
实现右下角广告图片的弹出 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>广告</title> <style type="text/css"> img { width: 200px; he...
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
05-09
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
使用jquery实现首页广告图片定时弹出和jquery展示图片时的特效函数
ginger_mr的博客
03-02 330
使用jquery实现首页广告图片定时弹出和jquery展示图片时的特效函数 Jquery展示图片的效果 在实际的开发中很少使用jquery自带的显示图片效果,都是使用美工做的。 技术分析 BOM的定时方法setinterval(),以及消除定时函数的clearinterval() 还有就是jquery展示图片方式的几个方法 最普通的显示图片:显示show()和隐藏hide(); 滑动图片:滑...
使用JQuery完成页面定时弹出广告
qq_42675691的博客
08-21 819
使用JQuery完成页面定时弹出广告 1.1 需求分析： 当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告 1.2 技术分析 定时器: setTimeout 显示和隐藏: style.display = “block/none” 什么JQuery: jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或Java...
基于JQuery实现页面定时弹出广告
10-15
**基于JQuery实现页面定时弹出广告**\n\n在网页设计中，有时我们需要实现一些交互功能，如定时弹出广告，以吸引用户的注意力。本文将详细介绍如何利用JQuery库来实现在用户打开页面后，经过特定时间间隔自动弹出广告...
使用jQuery实现页面定时弹出广告效果
10-19
主要介绍了使用jQuery实现页面定时弹出广告效果,需要的朋友可以参考下
jQuery缓缓弹出广告代码.zip
07-11
《jQuery缓缓弹出广告代码详解》 在网页设计与开发中，吸引用户的注意力是至关重要的。为此，开发者经常采用各种动态效果来提升用户体验，其中，缓缓弹出的广告代码是一种常见的策略。本篇文章将深入解析名为...
jQuery入门之首页定时弹出广告（一）
zhikanjiani的博客
06-24 834
一、jQuery介绍 jQuery是JavaScript的一个库，兼容CSS3，还兼容各种浏览器。jQuery官方文档https://www.jquery123.com/。 开发工具 sublime text 3、hbuilder 需要引入js库，官网下载js库并且在html页面使用 &lt;!DOCTYPE html&gt; &lt;html&gt; &...
jQuery图文排版点击弹出图片特效.zip
07-11
代码简介：jQuery图文排版点击弹出图片特效是一款jQuery实现的鼠标点击图片弹出大图，在弹出的大图点击可切换到下一张图片。
JS右下角广告窗口代码(可收缩、展开及关闭)
10-23
主要介绍了JS右下角广告窗口代码,具有浮动显示、可收缩、展开及关闭等功能,涉及javascript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
带关闭按钮的网页漂浮广告代码（全屏漂浮）
07-29
带关闭按钮的网页漂浮广告代码（全屏漂浮）
定时器——自动弹出广告
xiaorouer888的博客
06-20 401
html部分<body> <img id="miaov" src="img/miaov.jpg" /> </body>css部分<style> body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; } img { display:none;} </style>js部分<scri
JS实现定时显示广告图片
Those who achieve great thing do not stick to trifles
01-22 1400
JS实现定时显示广告图片 一、步骤分析 1、在原页面插入广告图片，并使其style=“display：none”，即隐藏图片； 2、绑定页面加载事件并驱动定时器函数setTimeout（显示图片函数名，毫秒），定时器隔X毫秒后执行指定一次 3、编写显示图片函数通过document.getElementById("in4").style.display="block";显示图片，并声明...
使用JS完成首页定时弹出广告图片
weixin_33991418的博客
03-04 146
一.需求分析 在首页中的顶部做一个定时弹出广告图片。 二.技术分析 隐藏图片： display： none定时操作： setInterval(“显示图片的函数”， 3000); 三.代码实现 1.javaScript部分代码 1 function init(){ ...
jQuery网页定时弹出广告
Rick的博客
03-22 482
1.下载jQuery，并导入：https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> ...
jquery定时显示广告
qq_33088807的博客
12-31 114
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-jq定时显示广告</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <div style="height: 500px; b.
JQ定时弹出广告
w2019424的博客
07-22 180
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <scri...
js,jq 右下角广告窗
删库跑路
05-20 322
效果预览：JQ：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;
使用Javascript+jquery完成视频弹幕效果
最新发布
06-11
使用 jQuery 监听视频播放器的暂停事件，遍历弹幕容器内的所有弹幕元素，使用 stop() 方法停止弹幕的滚动动画，即可实现暂停弹幕的效果。 ```javascript $('#video-player').on('pause', function() { $('#danmu-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值