注:此篇文章的图片及样式参考https://www.cnblogs.com/starof/p/4933907.html网站,js内容主要是根据自己所学去写的
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul{
margin: 0 auto;
padding: 0;
width: 576px;
height: 513px;
border:4px solid red;
font-size: 0;
}
li,a{
display: inline-block;
width: 190px;
height: 170px;
border:0.5px solid red;
font-size: 14px;
}
ul li .mask{
width: 190px;
height: 170px;
position: relative;
left:0;
top:-172px;
display: none;
box-shadow:0px -5px 10px 0px white inset,/* 添加转动时图片的阴影 */
-5px 0px 10px 0px white inset,
5px 0px 10px 0px white inset,
0px 5px 10px 0px white inset;
}
ul .active .mask{
display: block;
}
#page {
line-height: 32px;
color: #9a9a9a;
text-align: center;
position:absolute;
left: 50%;
top: 50px;
width: 300px;
height: 50px;
margin-left: -150px;
display: none;
background: #000;
color: #fff;
}
.act .mask{
display: block;
}
</style>
</head>
<body>
<ul>
<li><img class="active" src="images/1.jpg" alt=""><div class="mask"></div></li>
<li><img src="images/2.jpg" alt=""><div class="mask"></div></li>
<li><img src="images/3.jpg" alt=""><div class="mask"></div></li>
<li><img src="images/4.jpg" alt=""><div class="mask"></div></li>
<a><img src="images/9.jpg" alt=""></a>
<li><img src="images/5.jpg" alt=""><div class="mask"></div></li>
<li><img src="images/6.jpg" alt=""><div class="mask"></div></li>
<li><img src="images/7.jpg" alt=""><div class="mask"></div></li>
<li><img src="images/8.jpg" alt=""><div class="mask"></div></li>
</ul>
<div id="page"></div>
</body>
<script type="text/javascript">
var arr=[0,1,2,4,7,6,5,3] //给图片设置一个转动的方向
var arrLi=document.getElementsByTagName("li");
var oBtn=document.getElementsByTagName("a")[0];
var tim; //时间
var index=0
var swh=true
oBtn.onclick=function(){
if(swh){
swh=false;
time=setInterval(function(){
arrLi[arr[index]].className="";
index++; //将物品连续在一起转动
if(index>=8){
index=0;
}
arrLi[arr[index]].className="active"
},50); //转动的速度
setTimeout(function(){
clearInterval(time);
if(index==0){ //抽奖时阻止抽到最好的物品
arrLi[arr[index]].className="";
arrLi[arr[index+1]].className="active";
}
swh=true;
},Math.random()*500+1000) //转动的时间
}
}
</script>
</html>