效果如下图所示：
一、html部分
???<div class="myContainer"> ???????<ul> ???????????<li class="first"><img src="images/1.jpg"></li> ???????????<li class="second"><img src="images/2.jpg"></li> ???????????<li class="third"><img src="images/3.jpg"></li> ???????????<li class="fourth"><img src="images/4.jpg"></li> ???????????<li class="firth"><img src="images/5.jpg"></li> ???????????<li class="sixth"><img src="images/6.jpg"></li> ???????????<li class="first"><img src="images/7.jpg"></li> ???????????<li class="second"><img src="images/8.jpg"></li> ???????????<li class="third"><img src="images/9.jpg"></li> ???????????<li class="fourth"><img src="images/10.jpg"></li> ???????????<li class="firth"><img src="images/11.jpg"></li> ???????????<li class="sixth"><img src="images/12.jpg"></li> ???????</ul> ???</div>
二、css部分（清除样式自己写哈）
body,html { ???width: 100%; ???height: 100%;}.myContainer { ???width: 100%; ???height: 100%; ???background-image: url(‘../images/bg.png‘); ???background-repeat: no-repeat; ???-webkit-background-size: cover; ???background-size: cover; ???background-position: center center;}.first { ???width: 128px; ???height: 128px; ???opacity: 1; ???z-index: 6;}.first img { ???width: 100%; ???height: 100%; ???border-radius: 50%; ???border: 1px solid #346fe0; ???box-shadow: 0 0 40px 6px #0927c1;}.second { ???width: 114px; ???height: 114px; ???opacity: .9; ???z-index: 5;}.second img { ???width: 100%; ???height: 100%; ???border-radius: 50%; ???border: 1px solid #346fe0; ???box-shadow: 0 0 30px 4px #0927c1;}.third { ???width: 100px; ???height: 100px; ???opacity: .8; ???z-index: 4;}.third img { ???width: 100%; ???height: 100%; ???border-radius: 50%; ???border: 1px solid #346fe0; ???box-shadow: 0 0 30px 3px #0927c1;}.fourth { ???width: 86px; ???height: 86px; ???opacity: .7; ???z-index: 3;}.fourth img { ???width: 100%; ???height: 100%; ???border-radius: 50%; ???border: 1px solid #346fe0; ???box-shadow: 0 0 20px 3px #0927c1;}.firth { ???width: 78px; ???height: 78px; ???opacity: .6; ???z-index: 2;}.firth img { ???width: 100%; ???height: 100%; ???border-radius: 50%; ???border: 1px solid #346fe0; ???box-shadow: 0 0 20px 2px #0927c1;}.sixth { ???width: 54px; ???height: 54px; ???opacity: .5; ???z-index: 1;}.sixth img { ???width: 100%; ???height: 100%; ???border-radius: 50%; ???border: 1px solid #346fe0; ???box-shadow: 0 0 20px 1px #0927c1;}ul { ???position:relative;}三、js部分
(function(){ ???????????var ul=document.getElementsByTagName(‘ul‘)[0]; ???????????var li=ul.getElementsByTagName(‘li‘); ???????????for (var i = 0; i < li.length; i++) { //循环为每个元素定位 ???????????????var s = li[i].style; ???????????????s.position = ‘absolute‘; ?//设置为绝对定位 ???????????????var sWidth = li[i].clientWidth; //取到每一个li的宽度 ???????????????var myWidth=ul.offsetWidth-sWidth; ???????????????var myHeight=ul.offsetHeight-sWidth; ???????????????if (myWidth>0) { ???????????????????s.left = Math.floor(Math.random() * (myWidth)) + ‘px‘; ???????????????} ???????????????if(myHeight>0) { ???????????????????s.top = Math.floor(Math.random() * (myHeight)) + ‘px‘; ???????????????} ???????????} ???????})()原生js实现头像大屏随机显示
原文地址：https://www.cnblogs.com/candy-Yao/p/9239255.html