jquery背景图片动态轮播

1.图片定位

在body标签中的最后添加如下内容
<div class="screenbg">
   <ul>
      <li><a href="javascript:;"><img src="upload/images/0.jpg"></a></li>
      <li><a href="javascript:;"><img src="upload/images/1.jpg"></a></li>
      <li><a href="javascript:;"><img src="upload/images/2.jpg"></a></li>
      <li><a href="javascript:;"><img src="upload/images/3.jpg"></a></li>
      <li><a href="javascript:;"><img src="upload/images/4.jpg"></a></li>
   </ul>
</div>

2.样式控制

/*背景图片=========start====== */
.screenbg {
  position:fixed;
  bottom:0;
  left:0;
  z-index:-999;
  overflow:hidden;
  width:100%;
  height:100%;
  min-height:100%;
}
.screenbg ul li {
  display:block;
  list-style:none;
  position:fixed;
  overflow:hidden;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1000;
  float:right;
}
.screenbg ul a {
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:inline-block;
  margin:0;
  padding:0;
  cursor:default;
}
.screenbg a img {
  vertical-align:middle;
  display:inline;
  border:none;
  display:block;
  list-style:none;
  position:fixed;
  overflow:hidden;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1000;
  float:right;
}
/*背景图片=========end====== */

3.动态轮播

<script type="text/javascript" src="vipstack/js/lib/jquery-3.1.1.js"></script>

<script type="text/javascript">
   $(function(){
      $(".screenbg ul li").each(function(){
         $(this).css("opacity","0");
      });
      $(".screenbg ul li:first").css("opacity","1");
      var index = 0;
      var t;
      var li = $(".screenbg ul li");
      var number = li.length;
      function change(index){
         li.css("visibility","visible");
         li.eq(index).siblings().animate({opacity:0},3000);
         li.eq(index).animate({opacity:1},3000);
      }
      function show(){
         index = index + 1;
         if(index<=number-1){
            change(index);
         }else{
            index = 0;
            change(index);
         }
      }
      t = setInterval(show,2000);
      //根据窗口宽度生成图片宽度
      var width = $(window).width();
      $(".screenbg ul img").css("width",width+"px");
   });
</script>