jQuery实现图片自动出现消失

最新推荐文章于 2021-07-26 19:28:20 发布

三个和尚_

最新推荐文章于 2021-07-26 19:28:20 发布

阅读量1.2k

点赞数 1

分类专栏： javascript/jquery/bootstrap 文章标签： jQuery

本文链接：https://blog.csdn.net/a974986042/article/details/84900576

版权

该博客详细介绍了如何利用jQuery库实现图片的自动显示和消失效果，包括选择器的运用、事件监听以及动画效果的添加，为网页交互增添动态视觉体验。

摘要由CSDN通过智能技术生成

<!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.清除隐藏图片的定时操作