使用JQuery完成定时弹出广告/图片
2024-05-13 08:46:48
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> <a href="#"><li style="font-size: 20px;">首页</li></a> <a href="#"><li>商品</li></a> <a href="#"><li>商品</li></a> <a href="#"><li>商品</li></a> <a href="#"><li>商品</li></a> <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;">最新商品 <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;">最新商品 <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值为nonedocument.getElementById("img2").style.display="none";//9.清除隐藏广告图片的定时操作 不让其每3秒运行一次隐藏图片的函数clearInterval(time);}</script> -->
使用JQuery完成定时弹出广告/图片相关推荐
- 使用JS完成首页定时弹出广告图片
一.需求分析 在首页中的顶部做一个定时弹出广告图片. 二.技术分析 隐藏图片: display: none 定时操作: setInterval("显示图片的函数", ...
- 用js完成页面定时弹出广告
用js完成页面定时弹出广告 第一步:在页面指定位置隐藏一个广告图片(使用display属性的none值) 第二步:确定事件(onload)并为其绑定一个函数 第三步:书写这个函数(设置一个显示图片的定 ...
- 基于jQuery向下弹出遮罩图片相册
今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...
- JS实现定时弹出广告
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 简单的jQuery实现右下角弹出广告
在网上我们经常打开一个网页时候 经常看到右下角弹出一个对话框广告出来 感觉蛮好奇的 以前用javascript写一个这样的 比较复杂 要用dom节点什么的 今天用个jquery写个这样的非常简单 就 ...
- JavaScript 定时弹出广告
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
- html里左flash广告,网页中定时弹出一个Flash广告
网页中定时弹出一个FLASH广告的网页特效代码.过一定时间自动消失.当打开页面时,加载的FLASH广告在页面内容的上面播放显示,位置默认设置为屏幕的中间(可自行修改其播放位置),待FLASH广告播放完 ...
- [转贴]去除迅雷广告和弹出广告窗口
清除默认配置状态弹出的广告: 1.在主界面点击"工具"-"配置",在"配置"窗口左边选择"高级"选项卡,把右边" ...
- JAVA制作弹出小广告的程序_微信小程序实现首页弹出广告
本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下 这个微信小程序首页广告demo 仅供有需要的参考 .wxml this is ad //事件 catchtouchm ...
最新文章
- IE工具条不能自动显示
- Matlab中更改fig文件中线宽
- 程序员的噩梦：世界上最难的5种编程语言
- Unity Text 插入图片
- git submodule的工作原理
- 易语言锐浪报表连接mysql_学习锐浪报表之MySQL连接字符串的实际操作步骤汇总...
- Mirth Connect 互联互通 第五章 查询发送者通道
- 小米4android8.0root,小米小米 5X（安卓8.0）手机完美获取root教程，最强root工具，亲测可用！...
- 一起学Python_Day05_常用模块及相关操作
- html中bottom的作用,css bottom属性怎么用
- Firebird学习（02）：数据库的中文参考资料
- 阿里安全研究员路全：如何运用AI对抗“数据污染”？
- 老男孩Day9作业：高级FTP
- 一个selenium python网页脚本(机器人)，针对随聊520（www.suiliao520.com）匿名聊天匹配陌生人的网站
- C#画一个有故事的爱心
- 怎样卸载计算机更新程序,windows10升级程序卸载怎么操作_windows10升级程序怎样卸载删除-win7之家...
- 活体检测Face Anti-spoofing前世今生：作者（Fisher Yu ）
- 计算机网络up to down笔记_01
- 第一章:计算机硬件知识
- 大数据 客户标签体系_基于大数据的用户标签体系建设思路和应用