js简单实现图片切换效果

来源：互联网发布：淘宝开店的类目编辑：程序博客网时间：2024/05/01 15:20

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>

1 0