JQuery 定时操作实现图片显示与隐藏

心已赠人 2022-04-21 22:30 186阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    		<script>
    			$(function(){
    				time = setInterval("showAd()",3000);
    			});
    			function showAd(){
    //		1.		$("#img1").show();
    //		2.		$("#img1").slideDown();
    //		3.
    				$("#img1").fadeIn();
    				clearInterval(time);
    				time = setInterval("hiddenAd()",3000);
    			}
    			function hiddenAd(){
    //		1.		$("#img1").hide();
    //		2.		$("#img1").slideUp();
    //		3.
    				$("#img1").fadeOut();
    				clearInterval(time);
    			}
    		</script>
    		<script>
    			$(function(){
    				$("#btn1").click(function(){
    					$("#img2").toggle();
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<img src="../img/1.jpg" style="display: none;" id="img1"/>
    		<input type="button" id="btn1" value="btn"/><br />
    		<img src="../img/big01.jpg" id="img2"/>
    	</body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 jquery定时显示广告

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

深碍√TFBOYSˉ_/ 2023年01月01日 04:53/ 0 赞/ 104 阅读

相关 jquery实现鼠标悬浮显示图片

实现鼠标悬浮显示图片图片跟随鼠标 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

桃扇骨/ 2022年06月04日 05:50/ 0 赞/ 313 阅读

相关 jQuery实现图片定时轮播

参考出处：http://www.jb51.net/article/76153.htm <!DOCTYPE html> <html> <head>

骑猪看日落/ 2022年05月29日 07:47/ 0 赞/ 216 阅读

相关 js实现显示与隐藏

总结如下： 1.jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态

亦凉/ 2022年05月26日 08:15/ 0 赞/ 1027 阅读

相关 JS 实现定时操作隐藏显示图片（setInterval() clearInterval()）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><

ゝ一纸荒年。/ 2022年05月15日 15:54/ 0 赞/ 199 阅读

相关 JQuery 定时操作实现图片显示与隐藏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

心已赠人/ 2022年04月21日 22:30/ 0 赞/ 187 阅读

相关 js显示隐藏图片

1 ![20190213121435766.png][] 2 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

r囧r小猫/ 2022年03月20日 13:44/ 0 赞/ 245 阅读

相关 jquery实现div模块的隐藏和显示

-------------------- 1、点击按钮 <button id="fat-btn" class="btn btn-primary" type="bu

深碍√TFBOYSˉ_/ 2022年02月24日 12:28/ 0 赞/ 280 阅读

相关 JQuery隐藏和显示效果

1：引用插件jquery-3.2.1.min.js： 2：为了方便看出效果和美观，在外层放一个div盒子，给这个盒子设置一些样式：比如边距，边框，宽，高，

朴灿烈づ我的快乐病毒、/ 2021年12月20日 13:55/ 0 赞/ 295 阅读

相关图片突出显示（图片高亮显示）-jQuery实现-案例

效果展示：当鼠标放在某一张图片上的时候，突出显示这张图片。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

傷城~/ 2021年06月22日 15:36/ 0 赞/ 502 阅读