jq实现定时弹出广告

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量143 收藏
点赞数
分类专栏： JAVASCRIPT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxm809/article/details/108421727
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			#father{
				border: 0px solid red;
				width: 1300px;
				height: 2170px;
				margin: auto;
			}
			/*#logo{
				border: 0px solid black;
				width: 1300px;
				height: 50px;
			}*/
			.top{
				border: 0px solid blue;
				width: 431px;
				height: 50px;
				float: left;
			}
			#top{
				padding-top: 12px;
				height: 38px;
			}
			#menu{
				border: 0px solid red;
				width: 1300px;
				height: 50px;
				background-color: black;
				margin-bottom: 10px;
			}
			ul li{
				display: inline;
				color: white;
			}
			#clear{
				clear: both;
			}
			
			#product{
				border: 0px solid red;
				width: 1300px;
				height: 558px;
			}
			#product_top{
				border: 0px solid blue;
				width: 100%;
				height: 45px;
				padding-top: 8px;
			}
			#product_bottom{
				border: 0px solid green;
				width: 100%;
				height: 500px;
			}
			#product_bottom_left{
				border: 0px solid red;
				width: 200px;
				height: 500px;
				float: left;
			}
			#product_bottom_right{
				border: 0px solid blue;
				width: 1094px;
				height: 500px;
				float: left;
			}
			#big{
				border: 0px solid red;
				width: 544px;
				height: 248px;
				float: left;
			}
			.small{
				border: 0px solid blue;
				width: 180px;
				height: 248px;
				float: left;
				/*让里面的内容居中*/
				text-align: center;
			}
			
			#bottom{
				text-align: center;
			}
			
			a{
				text-decoration: none;
			}
		</style>
		
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//1.书写显示广告图片的定时操作
				time = setInterval("showAd()",3000);
			});
			
			//2.书写显示广告图片的函数
			function showAd(){
				//3.获取广告图片，并让其显示
				//$("#img2").show(1000);
				//$("#img2").slideDown(5000);
				$("#img2").fadeIn(4000);
				//4.清除显示图片定时操作
				clearInterval(time);
				//5.设置隐藏图片的定时操作
				time = setInterval("hiddenAd()",3000);
			}
			
			function hiddenAd(){
				//6.获取广告图片，并让其隐藏
				//$("#img2").hide();
				//$("#img2").slideUp(5000);
				$("#img2").fadeOut(6000);
				//7.清除隐藏图片的定时操作
				clearInterval(time);
			}
		</script>
		
	</head>
	<body onload="init()">
		<div id="father">
			<!--定时弹出广告图片位置-->
			<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>
			
			<!--1.logo部分-->
			<div id="logo">
				<div class="top">
					<img src="../img/logo2.png" height="46px"/>
				</div>
				<div class="top">
					<img src="../img/header.png" height="46px" />
				</div>
				<div class="top" id="top">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			<div id="clear">
				
			</div>
			<!--2.导航栏部分-->
			<div id="menu">
				<ul>
					<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>
			<!--3.轮播图部分-->
			<div id="">
				<img src="../img/1.jpg" width="100%" id="img1"/>
			</div>
			<!--4.最新商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%"/>
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--5.广告图片-->
			<div id="">
				<img src="../img/ad.jpg" width="100%"  />
			</div>
			<!--6.热门商品-->
			<div id="product">
				<div id="product_top">
					&nbsp;&nbsp;&nbsp;
					<span style="font-size: 25px;padding-top: 8px;">热门商品</span>&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" />
				</div>
				<div id="product_bottom">
					<div id="product_bottom_left">
						<img src="../img/big01.jpg" width="100%" height="100%"/>
					</div>
					<div id="product_bottom_right">
						<div id="big">
							<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
						<div class="small">
							<img src="../img/small03.jpg" />
							<a href="#"><p style="color: gray;">电炖锅</p></a>
							<p style="color: red;">¥399</p>
						</div>
					</div>
				</div>
			</div>
			<!--7.广告图片-->
			<div id="">
				<img src="../img/footer.jpg" width="100%"/>
			</div>
			<!--8.友情链接和版权信息-->
			<div id="bottom">
				<a href="#">关于我们</a>
				<a href="#">联系我们</a>
				<a href="#">招贤纳士</a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服务声明</a>
				<a href="#">广告声明</a>
				<p>
					Copyright © 2005-2016 传智商城 版权所有 
				</p>
			</div>
		</div>
	</body>
</html>

 

dxm809
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现轮播图的三种简单方法。
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
JS实战——轮播图
热门推荐
qq_65715980的博客
07-06 3万+
html+css+js实现目前各大网站上轮播图的效果，可以利用我的代码稍加改装就能实现想要的效果。
JS实现轮播图(超详细代码注释)
m0_56836274的博客
08-24 2万+
html，css,javasript实现轮播图,超详细代码注释。实现的功能有：自动轮播，鼠标放上去停止轮播，鼠标离开自动轮播，点击下方小圆圈实现图片切换，点击左右按钮实现切换
JS实现轮播图
WYF857446152的博客
05-17 7062
用JS实现轮播图
JS轮播图的n种方法
Benxiaohai_311的博客
03-22 1万+
第一种 轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title> <style> *.
基于JQuery实现页面定时弹出广告
10-15
利用JQuery中的 `slideDown` 和 `slideUp` 方法来实现广告的滑入和滑出效果。\n3. 编写显示和隐藏广告的函数。\n\n**步骤分析**\n\n实现此功能的基本步骤如下：\n\n1. 引入JQuery库文件，确保页面可以使用JQuery...
jq实现点击图片弹出大图
09-28
本教程将详细讲解如何使用jQuery实现点击图片后弹出大图的功能，这是一个常见的交互设计需求，能提升用户体验。 首先，我们需要在HTML结构中设置好图片的元素。通常，我们可以为每张图片创建一个`<img>`标签，并...
JQ鼠标经过标题向上弹出特效
11-17
以上是实现"JQ鼠标经过标题向上弹出特效"的基本方法。在实际开发中，可以根据项目需求进行调整，例如添加过渡效果、改变动画速度、调整弹出框内容的动态加载等。通过熟练运用jQuery，可以轻松创建出各种吸引人的网页...
确认按钮弹出框jq.zip
10-19
标题中的“确认按钮弹出框jq.zip”表明这是一个关于使用jQuery实现确认按钮弹出框的示例代码包。在这个项目中，我们很可能会看到如何利用jQuery的交互功能来创建一个用户友好的对话框，用于在执行关键操作前获取用户...
jquery实现弹出层效果实例
01-19
本文实例讲述了jquery实现弹出层效果的方法。分享给大家供大家参考。具体实现方法如下： <head runat=server> <title>jQuery弹出层</title> [removed][removed] [removed] $(function() { $(#...
JavaScript之手把手教你做轮播图
跳探戈的小龙虾的博客
04-08 1万+
我教你做的轮播图包括但不限于以下功能： 平滑滚动、定时滚动 + 点击滚动、防鼠标连续点击、第一张图与最后一张图无缝处理 如果你是在找轮播图怎么做的小白，那么恭喜你，找到我这儿，不用再换了，认认真真看完这篇文章，我保证你能做一个完整的轮播图。 而且我会以面向小白的简单通俗讲解，带大家做完轮播图，保证全程没有盲点。 不过前提是，有简单的jQuery基础和会用setTimeout()和setInterval()函数，这两个要求可以在我的其他博客里学习到。
JS轮播图详解
weixin_75154342的博客
09-17 3742
JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示，配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换，并通过事件监听器实现对鼠标事件的响应。CSS样式：通过CSS样式对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式，使图片水平排列在一行。调整功能和样式：根据需求，可以进一步调整轮播图的功能和样式，例如添加左右切换按钮、指示器、淡入淡出效果等。HTML结构：首先，在HTML中创建一个包含轮播图的容器，通常使用。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
weixin_52212950的博客
03-29 1万+
轮播图已经成了页面开发中不可缺少的一部分，日常生活中随处都能见到轮播图的身影，例如平常我们购物的淘宝，京东等等，都靠着轮播图在一片 有限的区域内展现出更多的商品。这也是前端程序员最早接触到的练手小项目，这篇文章带大家透彻拿下轮播图！从此不再迷茫 首先我们来看一下本次案例的效果： （下面有请本人女朋友出境！话说我是在搞不明白 gif 图怎么设置，但总之就是该有的功能都有，不该有的功能也有（例如杀狗 hhhhh），自动播放，点击切换按钮切换图片，点击下方圆点切换图片均可实现，就不一一演示了，主要还是让..
js轮播图 最简单代码
m0_54589634的博客
10-24 2万+
js轮播图 最简单代码 今天来分享一篇js最简单轮播图轮播图，用最简单的代码实现： 首先，建立一个HTML文件，插入img标签，这里我们定义图片id为pic 然后使用document.getElementByid()获取img标签的id，并且定一个一个变量obj储存对象 把轮播的图片设置数字.JPG(方便插入) 定义一个全局变量num，这里我们初始图片为0.JPG。num初始值可以设置为0 创建轮播函数，使用obj变量设置img标签插入的图片，随着num数值的变化切换图片，当切换到最后一张图片时，num重
原生js实现轮播图的两种方式
最新发布
h395910638的博客
06-17 441
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
手把手教你用原生js实现轮播图特效
fenglingcxd的博客
08-27 2396
很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。 原理： 将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。 步骤一：建立html基本布局 如下所示： ...
php用jq实现弹出框
05-24
可以使用 jQuery UI 中的对话框（Dialog）实现弹出框效果。以下是一个示例代码： 1. 引入jQuery和jQuery UI库 ```html <head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </head> ``` 2. 使用 jQuery UI Dialog 创建弹出框 ```html <body> <div id="dialog" title="提示"> <p>这里是弹出框的内容</p> </div> <button id="btn">弹出框</button> <script> $(function() { $("#dialog").dialog({ autoOpen: false, // 初始时不自动打开 modal: true, // 遮罩层，禁止操作页面 buttons: { "确定": function() { $(this).dialog("close"); // 关闭弹出框 } } }); $("#btn").click(function() { $("#dialog").dialog("open"); // 打开弹出框 }); }); </script> </body> ``` 这里我们创建了一个 id 为 "dialog" 的 div 元素作为弹出框的内容，并使用 jQuery UI 的 dialog 方法将其转换为弹出框。然后在页面上创建一个按钮，点击后打开弹出框。在弹出框中还可以添加按钮，用于实现一些操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值