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>