jQuery实现图片自动出现消失

雨点打透心脏的1/2处 2022-04-06 08:12 180阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>首页</title>
    		<style>
    			#father{
    				border: 0px solid red;
    				width: 1300px;
    				height: 2170px;
    				margin: auto;
    			}
    		</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"/>	
    		</div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 IOS AlertView 自动消失

UIAlertView \alert; \- (IBAction)Open:(id)sender \{ alert = \[\[UIAlertView alloc\] i

﹏ヽ暗。殇╰゛Y/ 2023年10月18日 08:39/ 0 赞/ 3 阅读

相关 JQuery实现简单图片自动轮播效果

原理:依靠子元素位移实现图片转换效果图原理： ![20210206114348447.gif][] 效果：不带自动切换的轮播，需要点击才能轮播 ![2021020

叁歲伎倆/ 2022年10月28日 12:25/ 0 赞/ 279 阅读

相关 jquery实现图片自动轮播

这是自己以前实现的功能，在此和大家一起分享，以后多写博客咯，方便与大家共享知识，也为了自己可以更好的记忆。源代码： <!DOCTYPE html PUB

你的名字/ 2022年08月21日 03:15/ 0 赞/ 268 阅读

相关 JQuery实现图片切换（自动切换+手动切换）

学习JS的时候本来积攒了很多有趣的小例子，但是苦于没有找到一些好的平台来展示这些JS效果。今天发现了RunJS这个分享代码的平台，迫不及待

ゝ一纸荒年。/ 2022年08月06日 14:15/ 0 赞/ 293 阅读

相关 jQuery实现图片左右出现和隐藏动画（腰封）

一定要引入jQuery，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-e

淡淡的烟草味﹌/ 2022年07月13日 08:57/ 0 赞/ 188 阅读

相关 jquery聚焦自动轮播图片

主页核心代码（Default.aspx）： \[html\] [view plain][] [copy][view plain] 1. <!DOCTYPE h

叁歲伎倆/ 2022年06月08日 13:06/ 0 赞/ 251 阅读

相关 Jquery实现淡入淡出自动消失的提示框，Jquery+css实现加载中提示框

浏览器原生弹出框太丑，且不能自动消失，可以使用Jquery自定义一个消失提示框。样式写法参考了bootstrap样式的编写方式。静态效果如下： ![70][]

柔情只为你懂/ 2022年05月16日 13:47/ 0 赞/ 907 阅读

相关 jQuery实现图片自动出现消失

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页<

雨点打透心脏的1/2处/ 2022年04月06日 08:12/ 0 赞/ 181 阅读

相关 js实现一个一个出现一个一个消失

文字出现和消失 .box1 { background-color: yellow; margin-

小灰灰/ 2022年01月30日 02:25/ 0 赞/ 215 阅读

相关 jquery实现图片切换

<div> <img class="imgclick" src="img/pic1.png" /> </div>

布满荆棘的人生/ 2021年09月19日 10:10/ 0 赞/ 441 阅读