js简单实现图片切换效果

最新推荐文章于 2025-07-09 21:14:34 发布

i am a coder

最新推荐文章于 2025-07-09 21:14:34 发布

阅读量4.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：其他

本文链接：https://blog.youkuaiyun.com/liu625524324/article/details/50547914

其他专栏收录该内容

15 篇文章

订阅专栏

js简单实现图片切换效果

<!DOCTYPE html>
<html>
  <head>
    <title></title>	
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		.adbody{
			width:100%;
			height:100%;
		}
		.adPanel{
			width:100%;
			height:100%;			
		}
	</style>
  </head>
  <body class="adbody">
    <div class="adPanel" id="adPanel"></div>
  </body>
  <script>
  	var count = 1;
  	var panel = $("#adPanel");
  	$(function(){ 		
  		var height = window.innerHeight;
  		panel.attr("style","height:"+height+"px");
  		startInterval();
  	});
  	function startInterval(){
  		setInterval("changeImg()", 4000);
  	}
  	function changeImg(){
  		var img =  "img/"+count+".jpg";
  		panel.css("background-image", "url('"+img+"')");  
  		panel.css("background-repeat", "no-repeat");  
  		panel.fadeIn(500);  		
  		setTimeout("doFadeOut()", 3000);
  		count ++;
  		if(count > 6){
  			count = 1;
  		}
  	}
  	function doFadeOut(){
  		panel.fadeOut(500);
  	}
  </script>
</html>