使用jquery实现图片淡入淡出

最新推荐文章于 2024-03-21 19:52:25 发布

原创最新推荐文章于 2024-03-21 19:52:25 发布 · 518 阅读

1 ·

CC 4.0 BY-SA版权

html css 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用jQuery库创建一个简单的图片淡入淡出轮播效果。通过HTML布局和jQuery代码实现图片之间的平滑过渡，为网页增添动态视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

				<div id="content">
					<div id="logo1">
						<img class="top" id="top" src="jslunbo1/images/logo1.png" /><div id="juzhong"></div>
					</div>
					<div id="logo2">
						<img class="top2" id="top2" src="jslunbo1/images/logo2.png" /><div id="juzhong2" class="top2"></div>
					</div>
					<div id="logo3">
						<img class="top3" id="top3" src="jslunbo1/images/logo3.png" /><div id="juzhong3" class="top3"></div>
					</div>
				</div>

css部分：

		 	#logo1{
		 		width: 299px;
		 		height: 427px;
		 		/*border: 1px solid blue;*/
		 		/*background: url("jslunbo1/images/logo1.png");*/
		 		position: relative;
		 		opacity: 1;
		 		float: left;
		 	}
		 	#logo2{
		 		width: 299px;
		 		height: 427px;
		 		/*border: 1px solid red;*/
		 		/*background: url("jslunbo1/images/logo2.png");*/
		 		opacity: 1;
		 		float: left;
		 	}
		 	#logo3{
		 		width: 321px;
		 		height: 427px;
		 		/*border: 1px solid yellow;*/
		 		/*background: url("jslunbo1/images/logo3.png");*/
		 		opacity: 1;
		 		float: left;

jquery部分：

			$(document).ready(function(){

				$("#logo1").hover(
				  function(){
				   $("#juzhong").stop().animate({opacity: '1'},3000);
				   $("#top").stop().animate({opacity: '0'},3000);
				  },
				  function(){
				   $("#juzhong").stop().animate({opacity: '0'},3000);
				   $("#top").stop().animate({opacity: '1'},3000);
				  });

				$("#logo2").hover(
				  function(){
				   $("#juzhong2").stop().animate({opacity: '1'},3000);
				   $("#top2").stop().animate({opacity: '0'},3000);
				  },
				  function(){
				   $("#juzhong2").stop().animate({opacity: '0'},3000);
				   $("#top2").stop().animate({opacity: '1'},3000);
				  });


				$("#logo3").hover(
				  function(){
				   $("#juzhong3").stop().animate({opacity: '1'},3000);
				   $("#top3").stop().animate({opacity: '0'},3000);
				  },
				  function(){
				   $("#juzhong3").stop().animate({opacity: '0'},3000);
				   $("#top3").stop().animate({opacity: '1'},3000);
				  });

			});

小提醒：不要忘记引入jquery