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') ...
随机推荐
- ROS安装教程
对于ROS的安装,在它的官方网站: http://wiki.ros.org/ROS/Installation 中也有详细说明.但是对于像博主这样先天英语发育不全的人来说,直接看官网还是有点困难的. 所 ...
- DirectUI界面编程（三）从XML文件中加载界面
Duilib支持xml界面布局,使得界面设计与逻辑处理相分离,本节介绍如何从xml文件中加载界面元素. 我们需要以下几个步骤: 创建并初始化CPaintManagerUI对象. 创建CDialogBu ...
- 移除HTML5 input在type="search"时的清除按钮
input[type="search"]::-webkit-search-cancel-button { display: none; }
- 七天C#小结
从基础的理论知识,到最后一天,能够理解并且自己编写出一些经典的事例,自己期初觉得不会这么快,几乎是零基础的自己从什么都不会,到七天后能够独立思考并且编写出100多行的代码,自己还是有些欣慰的,从点到面 ...
- 常用的Linux命令汇总
1. 进入某个文件夹 2.查找某个文件或内容 3.查看文件内容 4.kill进程 启动tomcat 停止tomcat 1. 进入某个文件夹 比如有个目录,路径是: /home/user1/doc ...
- Maven private reprository 更新
maven对构件的更新判断基本上是两种,一种是稳定版本,一种是maven特有的SNAPSHOT版本. 稳定版本很好判断,直接根据maven构件的坐标体系就能够获得.先从本地仓库中找,如果本地仓库没有, ...
- 基础——(5)D Flip-Flop(D触发器)
之前搞了一个 D-Latch,看一下下图是怎么变化的 In D-latch anytime its enabled the input D is going to be output at Q 使用c ...
- CSS骚操作
获取当前HTML页面根元素的字体大小 getComputedStyle(document.getElementsByTagName("html")[0],undefined).fo ...
- KVM虚拟机相关步骤
KVM是Kernel-based Virtual Machine的简称,是一个开源的虚拟化模块,该文档是基于CentOS 7.4环境操作的 一.操作系统安装 本文采用的是CentOS 7.4 1.查看 ...
- Linux 进程及作业管理
进程简介: 内核的功用:进程管理.文件系统.网络功能.内存管理.驱动程序.安全功能 进程(Process):什么是进程,进程是程序的执行实例,即运行中的程序,同时也是程序的一个副本:程序是放置于磁 ...