jQuery学习(二)——使用JQ完成页面定时弹出广告
1、JQuery效果
2、步骤分析：
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数)
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
第六步：清除显示广告图片的定时操作
第七步：设置定时操作(隐藏广告图片的函数)
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
//1.书写显示广告图片的定时操作
time=setInterval("showAd()",3000);
}); //2.书写显示图片的函数
function showAd(){
//3.获取广告图片，并让其显示
//$("#img_2").show(1000);
$("#img_2").slideDown(3000); //滑入 //4.清除显示图片的定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time=setInterval("hiddenAd()",3000);
} function hiddenAd(){
//6.获取广告图片让其隐藏
//$("#img_2").hide();
$("#img_2").slideUp(3000); //滑出
//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script>
3、最终实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father{
border: 0px solid black;
width: 1300px;
height: 1600px;
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: black;
margin-bottom: 10px;
}
ul li{
display: inline;
color: white;
}
#product{
border: 0px solid goldenrod;
width: 1300px;
height: 550px;
}
#product_top{
border: 0px solid blue;
width: 100%;
height: 43px;
padding-top: 5px;
}
#product_bottom{
border: 0px solid green;
width: 100%;
height: 498px;
} #product_bottom_left{
border: 0px solid red;
width: 200px;
height: 498px;
float: left;
}
#product_bottom_right{
border: 0px solid saddlebrown;
width: 1094px;
height: 498px;
float: left;
}
#big{
border: 0px solid hotpink;
width: 545px;
height: 247px;
float: left;
}
.small{
border: 0px solid blue;
width: 180px;
height: 247px;
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.获取广告图片，并让其显示
//$("#img_2").show(1000);
$("#img_2").slideDown(3000); //滑动 //4.清除显示图片的定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time=setInterval("hiddenAd()",3000);
} function hiddenAd(){
//6.获取广告图片让其隐藏
//$("#img_2").hide();
$("#img_2").slideUp(3000);
//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script>
</head>
<body body onload="init()">
<div id="father">
<!--定时弹出广告图片位置-->
<img src="../img/pic.jpg" width="100%" style="display: none;" id="img_2"/> <!--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> <!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="font-size: large;">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
</ul>
</div> <!--3.轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%" height="100%" id="img_1"/>
</div> <!--4.最新商品-->
<div id="product"> <div id="product_top">
<span style="font-size: 25px">最新商品</span>
<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">
<a href="#"><img src="../img/small01.jpg" ></a>
<a href="#"><p style="color: gray;">榨汁机</p></a>
<p style="color: red;">599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small02.jpg" ></a>
<a href="#"><p style="color: gray;">电视机</p></a>
<p style="color: red;">1599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg" ></a>
<a href="#"><p style="color: gray;">锅</p></a>
<p style="color: red;">399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small04.jpg" ></a>
<a href="#"><p style="color: gray;">面包机</p></a>
<p style="color: red;">799</p>
</div>
<div class="small">
<a href="#"><img src="../img/small05.jpg" ></a>
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">899</p>
</div>
<div class="small">
<a href="#"><img src="../img/small06.jpg" ></a>
<a href="#"><p style="color: gray;">洗衣机</p></a>
<p style="color: red;">999</p>
</div>
<div class="small">
<a href="#"><img src="../img/small07.jpg" ></a>
<a href="#"><p style="color: gray;">扫地机器人</p></a>
<p style="color: red;">1599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small09.jpg" ></a>
<a href="#"><p style="color: gray;">微波炉</p></a>
<p style="color: red;">1099</p>
</div>
<div class="small">
<a href="#"><img src="../img/small08.jpg" ></a>
<a href="#"><p style="color: gray;">压力锅</p></a>
<p style="color: red;">799</p>
</div>
</div>
</div>
</div> <!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%"/>
</div> <!--6.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%"/>
</div> <!--7.友情链接和版权信息-->
<div id="bottom">
<a href="#"><font>关于我们</font></a>
<a href="#"><font>联系我们</font></a>
<a href="#"><font>招贤纳士</font></a>
<a href="#"><font>法律声明</font></a>
<a href="#"><font>友情链接</font></a>
<a href="#"><font>支付方式</font></a>
<a href="#"><font>配送方式</font></a>
<a href="#"><font>服务声明</font></a>
<a href="#"><font>广告声明</font></a>
<p>
Copyright © 2005-2016 hh商城 版权所有
</p>
</div>
</div>
</body>
</html>
jQuery学习(二)——使用JQ完成页面定时弹出广告的更多相关文章
- JavaScript学习——使用JS完成页面定时弹出广告
1.获取图片的位置(document.getElementById(“”)) 隐藏图片:display:none 定时操作:setInterval(“显示图片的函数”,3000); 2.步骤分析 ( ...
- 【JavaScript】案例三：使用JS完成页面定时弹出广告——事件(onload)
事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...
- 使用jquery完成定时弹出广告图片
<script src="../js/jquery-1.8.3.js"></script> <script type="text/javas ...
- JS应用实例3：定时弹出广告
在观看视频时候总会发现有广告弹出 这里就做一个类似这样的定时弹出广告的实例: 前面的JS代码和HTML写在同一个文件,实际开发中总是分开来写 用的时候引入即可 HTML代码: <!DOCTYPE ...
- 使用JS完成首页定时弹出广告图片
一.需求分析 在首页中的顶部做一个定时弹出广告图片. 二.技术分析 隐藏图片: display: none 定时操作: setInterval(“显示图片的函数”, 3000); 三.代 ...
- jQuery网页定时弹出广告
1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...
- JS练习：定时弹出广告
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- JavaScripts广告轮播图以及定时弹出和定时隐藏广告
轮播图: 函数绑定在body标签内 采用3张图,1.jpg 2.jpg 3.jpg 利用定时任务执行设置图片属性 src 利用for循环可以完成3秒一次 一替换. 定时弹出广告: 由于bod ...
- jsp页面制作弹出框
各种弹出页面的设计 [1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript> <!-- window.open ('page.html') ...
随机推荐
- 弹出ifame页面(jquery.reveal.js)
<body> <a data-reveal-id="myModalDailyModify" data-animation="fade" tit ...
- jquery中$each()
$.each():可用于遍历任何的集合(无论是数组或对象) $(selector).each():专用于jquery对象的遍历, 如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this ...
- javascript中全屏滑动效果实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Custom Hosting in IIS/WAS
常常需要与宿主实例进行交互.这对于使用自托管的方式是不可或缺的.当使用IIS或WAS时,不能直接访问宿主.为了克服这个障碍,WCF提供了一个宿主工厂.在.svc文件中使用Factory标签,使用此工厂 ...
- RocketMQ学习笔记（10）----RocketMQ的Producer 事务消息使用
1. 事务消息原理图 RocketMQ除了支持普通消息,顺序消息之外,还支持了事务消息. 1. 什么是分布式事务? 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同 ...
- Unity 围绕X、Y、Z旋转图例
绿色:绕X 红色:绕Y 蓝色:绕Z PS:这是右手坐标系,Unity为左手坐标系 不知道啥叫左手右手?参见我的另一篇文章http://www.cnblogs.com/36bian/p/7571727. ...
- (翻译) Inheritance and the prototype chain 继承和原型链
JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++) ...
- POJ 1988 Cube Stacking（ 带权并查集 ）*
POJ 1988 Cube Stacking( 带权并查集 ) 非常棒的一道题!借鉴"找回失去的"博客 链接:传送门 题意: P次查询,每次查询有两种: M x y 将包含x的集合 ...
- web前端开发技术栈分析图
- MySQL的读写分离的几种选择
MySQL的读写分离的几种选择 MySQL主从复制(Master-Slave)与读写分离(MySQL-Proxy)实践 原址如下: http://heylinux.com/archives/1004. ...