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

最新推荐文章于 2020-03-02 20:39:29 发布
最新推荐文章于 2020-03-02 20:39:29 发布
阅读量181 收藏
点赞数
分类专栏： 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 567
广告样式 <script src="js/jquery-3.4.0.js"></script> <style> div{ width: 500px; height: 500px; background-color: burlywood; di...
前端简单入门第十六讲 使用jQuery完成定时弹出广告
李阿昀的博客
05-09 4459
还记得之前使用的JavaScript的方式完成定时弹出广告吗？如果读者不记得了，可看看我之前写的文章教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告，现在我就来使用jQuery完成同样的效果。不可避免地就要了解一下jQuery了。jQuery的概述什么是jQuery呢？jQuery是一个JavaScript的框架（即JavaScript的类库）。它对传统
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
05-09
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
使用jquery实现首页广告图片定时弹出和jquery展示图片时的特效函数
ginger_mr的博客
03-02 331
使用jquery实现首页广告图片定时弹出和jquery展示图片时的特效函数 Jquery展示图片的效果 在实际的开发中很少使用jquery自带的显示图片效果,都是使用美工做的。 技术分析 BOM的定时方法setinterval(),以及消除定时函数的clearinterval() 还有就是jquery展示图片方式的几个方法 最普通的显示图片:显示show()和隐藏hide(); 滑动图片:滑...
弹出广告简洁的jquery特效
柚的个人技术博客
06-09 3154
BOSS需要一个首页弹出广告的特效，于是webhao在粽子节前夕，熬夜做出一个手机端广告弹出特效，点击tochch me小手，出现一个带有白色幕布和广告图片的背景，再次点击屏幕效果消失，首页恢复正常。 jQuery代码： $(function(){ //可视窗口的宽度,高度 var width=$(window).width(); var height=$(window).he
使用JQuery完成页面定时弹出广告
qq_42675691的博客
08-21 822
使用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图文排版点击弹出图片特效.zip
07-11
代码简介：jQuery图文排版点击弹出图片特效是一款jQuery实现的鼠标点击图片弹出大图，在弹出的大图点击可切换到下一张图片。
JS右下角广告窗口代码(可收缩、展开及关闭)
10-23
主要介绍了JS右下角广告窗口代码,具有浮动显示、可收缩、展开及关闭等功能,涉及javascript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
带关闭按钮的网页漂浮广告代码（全屏漂浮）
07-29
带关闭按钮的网页漂浮广告代码（全屏漂浮）
android利用定时器实现应用开头加载图片或者静态广告的显示
ahui7019的博客
01-07 138
下载了韩寒的电子杂志《一个》，它有一个广告，就是每次进入程序的时候都会有一个静态的图片（如果没猜错的话应该是ImageView），然后显示几秒钟过后才进入真正的程序，其他的一些APP中也有一些是刚进程序的时候，先显示一张静态的等待图片，其实那个是等待加载的图片，其实功能也和这个类似，只不过那个是加载完成后再跳转，我这个为了实现定时就是显示固定的实现，那么这个简单的有用的小功能是如何实...
jq实现购物网站顶部广告自动弹出收回效果
li3196672779的博客
06-16 394
*{ margin: 0px; padding: 0px; } .box{ width: 1200px; margin: 0px auto; border: 2px solid red; } .top{ height: 400px; background: yellow; } .list{ heig
jQuery入门之首页定时弹出广告（一）
zhikanjiani的博客
06-24 836
一、jQuery介绍 jQuery是JavaScript的一个库，兼容CSS3，还兼容各种浏览器。jQuery官方文档https://www.jquery123.com/。 开发工具 sublime text 3、hbuilder 需要引入js库，官网下载js库并且在html页面使用 &lt;!DOCTYPE html&gt; &lt;html&gt; &...
基于JQuery网页漂浮广告窗口Js详解
热门推荐
yukeung
04-06 2万+
网页类似广告漂浮窗口的制作思路以及详细代码
js,jq 右下角广告窗
删库跑路
05-20 324
效果预览：JQ：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;
重定向与请求转发的区别
qq_40922845的博客
02-26 6615
重定向和请求转发的区别 1、重定向是两次请求，转发是一次请求，因此转发的速度要快于重定向 2、重定向之后地址栏上的地址会发生变化，变化成第二次请求的地址，转发之后地址栏上的地址不会变化，还是第一次请求的地址 3、转发是服务器行为，重定向是客户端行为。重定向时浏览器上的网址改变 ,转发是浏览器上的网址不变 4、重定向是两次request，转发只有一次请求 5、重定向时的网址可以是任何网址，转发的网址...
使用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、付费专栏及课程。

余额充值