用js实现跑马灯抽奖效果

<table>
    <tr>
        <td><img id="img1" src="img/1.jpg"></td>
        <td><img id="img2" src="img/2.jpg"></td>
        <td><img id="img3" src="img/3.jpg"></td>
    </tr>
    <tr>
        <td><img id="img8" src="img/4.jpg"></td>
        <td id="control" οnclick="start()" style="text-align: center;font-size: 72px;color:red;background-color: yellow;opacity:1;">
          START
        </td>
        <td><img id="img4" src="img/5.jpg"></td>
    </tr>
    <tr>
        <td><img id="img7" src="img/6.jpg"></td>
        <td><img id="img6" src="img/7.jpg"></td>
        <td><img id="img5" src="img/8.jpg"></td>
    </tr>
</table>

/*以上是body部分，下面为js实现部分*/

<pre name="code" class="javascript">var seed = null;

    function start(){
        var imgCount = 1;
        var status = $("#control");

        if( status.html().trim() == "START" ){
            status.html("END");
            seed = setInterval(function(){
                if( imgCount > 8 ){
                    imgCount = 1;
                }

                $("[id^=img]").each(function(index, value){
                    var imgIndex = $(value).attr("id").substring(3,4);

                    if(imgIndex == imgCount){
                        $("#img" + imgIndex).css("opacity", 1);
                    } else {
                        $("#img" + imgIndex).css("opacity", 0.5);
                    }
                });
                ++imgCount;
            });
        } else {
            status.html("START");
            clearInterval( seed );
        }
    }