分享好友教程首页教程搜索频道列表

网站顶部大图广告显示数秒后隐藏后显示小图

2018-09-02 16:5312490
+关注32
核心提示:这个jquery特效总共有三种效果:第一种为:顶部大图广告显示数秒后隐藏。也就说除...

网站顶部大图广告显示数秒后隐藏后显示小图

这个jquery特效总共有三种效果:

第一种为:顶部大图广告显示数秒后隐藏。也就说除非刷新,也就不再显示了。

第二种为:顶部大图广告显示数秒后隐藏。然后会出现一个重播的按钮。

第三种为:顶部大图广告显示数秒后隐藏。然后会显示一个小图。

有兴趣的可以仔细研究一下,demo只是其中一个小图的预览。像的显示时间等,图片大小都是可以自定义的。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部广告显示数秒后隐藏效果</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!--  第一种形式原广告显示数秒后隐藏  -->
<!--<script type="text/javascript">
$(document).ready(function(){
	
	$("#banner").slideDown("slow");		
})
 function displayimg(){
	$("#banner").slideUp("slow");    
  }
 
  setTimeout("displayimg()",15000);
  
</script>-->

<!--  第二种形式原广告显示数秒后大板块隐藏,显示用来重播的标签  -->
<!--<script type="text/javascript">
$(document).ready(function(){
	
	$("#banner").slideDown("slow");		
	$("#rightOpen").hide();
	
	$("#rightOpen").click(function(){
		$("#banner").slideDown("slow"); 
		setTimeout("displayimg()",15000);
		$("#rightOpen").hide();
	})
})
 function displayimg(){
	$("#banner").slideUp("slow");   
		$("#rightOpen").show();  
  }
 
  setTimeout("displayimg()",15000);
  
</script>-->

<!--  第三种形式原广告显示数秒后隐藏,展示小图  -->
<script type="text/javascript">
$(document).ready(function(){
	
	$("#banner").slideDown("slow");	
})
 function displayimg(){
	$("#banner").slideUp(1000,function(){
		$("#top").slideDown(1000);
	})
  }
  setTimeout("displayimg()",1000);
</script>
</head>

<body>
<!--<div id="rightOpen" style="width:25px; height:275px; position:absolute; right:0px; top:0px;">重播</div>--><!--此注释的div为应用第二种js时所需要的内容,若用到第二种样式,请解除div的注释。里面的“重播”按钮可以为文字,也可以为图片。www.tonjay.com注-->
<div id="top" style="display:none;"><img src="02.jpg" width="980" height="60" /></div><!--若用到第一种样式和第二种样式,此div可以删除。www.tonjay.com注-->
<div id="banner" style="width:980px; height:291px; display:none;"><img src="01.jpg" width="980" height="291" /></div>
</body>
</html>

免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
最新其他更多

纯CSS实现多标签自动显示超出数量的思路详解

    有多个宽度不同的标签水平排列,当外层宽度不足时,会自动提示超出的数量,这篇文章主要介绍了纯 CSS 实现多标签自动显示超出数量的思路详解,需要的朋友可以参考下

小黑 CSS相关2026-07-20

使用CSS实现渐变圆角边框的效果

    这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果,有没有发现在现如今的网站应用中,我们大量的使用到这类场景,在解决这类问题时,我们利用了css的mask与mask-composite属性

小黑 CSS相关2026-07-20

css3收货地址平行四边形的线条样式示例代码

    这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

小黑 CSS相关2026-07-20

CSS实现空心尖角的示例代码

网络 CSS相关2026-07-20

CSS3用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

小黑 CSS相关2026-07-20

下一篇
我来说两句
抢沙发