<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ width:129px; height:59px; border:3px solid black; float:left; // 向左浮动 margin:8px 0 0 8px; // 设置图片间的间距 list-style:none; } .btn{ border:3px solid blue; // 设置为红色边框 cursor:pointer; // 设置光标类型为指针 } .cur{ border:3px solid red; // 设置为红色边框 } </style> <title>zhuanpan</title> </head> <body> <div> <ul> <li id="c1">1</li> <li id="c2">2</li> <li id="c3">3</li> <li id="c8">谢谢参与</li> <li class="btn" onclick="run();">点击抽奖</li> <li id="c4">1</li> <li id="c7">2</li> <li id="c61">3</li> <li id="c51">谢谢参与</li> </ul> </div> </body> </html> <script type="text/javascript" src="http://www.jiurong.com/public/2014_2/js/jquery.min.js?v=1.5.5.8.27"></script> <script type="text/javascript"> // 整个转动过程所需的步骤 var step = [ ['c1',0], // 第一个元素特殊设置 ['c1', 500], ['c2', 100], ['c3', 300], ['c4', 200], ['c5', 200], ['c6', 200], ['c7', 200], ['c8', 200], ['c1', 100], ['c2', 100], ['c3', 100], ['c4', 100], ['c5', 100], ['c6', 100], ['c7', 100], ['c8', 100], ['c1', 100], ['c2', 100], ['c3', 100], ['c4', 100], ['c5', 100], ['c6', 100], ['c7', 100], ['c8', 100], ['c1', 100], ['c2', 100], ['c3', 100], ['c4', 100], ['c5', 100], ['c6', 100], ['c7', 100], ['c8', 100], ['c1', 100], ['c2', 200], ['c3', 300], ['c4', 300], ['c5', 300], ['c6', 300], ['c7', 300], ['c8', 300], ['c1', 400], ['c2', 400], ['c3', 400], ['c4', 400], ['c5', 400], ['c6', 400], ['c7', 400], ['c8', 400] ]; // 记录当前步数，即step数组的下标 var current = 1; // 设置样式和重新设置定时器 function run(){ // 删除之前设置的cur类 $('#'+step[current-1][0]).removeClass('cur'); // 为当前元素设置cur类 $('#'+step[current][0]).addClass('cur'); // 判断step数组所有步骤是否已经走完 if(current == step.length - 1){ alert(step[current][0]); window.location.reload(); }else{ // 重新设置定时器 setTimeout('run()', step[current][1]); current++; } } </script>