小demo

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:0;
            display: block;
            background-color: rgba(0,0,0,.5);
            z-index: 999;
            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: none;
            }
        #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;
        }

html部分:

<ul>
    <li>1<div class="mask"></div></li>
    <li>2<div class="mask"></div></li>
    <li>3<div class="mask"></div></li>
    <li>4<div class="mask"></div></li>
    <a>GO</a>
    <li>6<div class="mask"></div></li>
    <li>7<div class="mask"></div></li>
    <li>8<div class="mask"></div></li>
    <li>9<div class="mask"></div></li>
</ul>
<div id="page"></div>

Js部分:

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;
            speed = 50;
            roll()
            function roll(){
                arrLi[arr[index]].className="";
                index++;  //將物品連續在一起轉動
                if(index>=8){
                    index=0;
                }
                arrLi[arr[index]].className="active";
                speed += 20;
                time=setTimeout(roll,speed);  //轉動的速度
            }
            
            setTimeout(function(){
                clearTimeout(time);
                if(index==0){   //抽獎時阻止抽到最好的物品
                    arrLi[arr[index]].className="";
                    arrLi[arr[index+1]].className="active";
                }                
                swh=true;
            },Math.random()*3500+1000)  //轉動的時間
        }    
    }    

...