<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } #uls{ width: 500px; height: 500px; margin: 50px auto; } li{ width: 150px; height: 150px; background: skyblue; float: left; list-style: none; margin:5px; color: #fff; text-align: center; line-height: 150px; font-size: 20px; font-weight: bold; } #uls li button{ width: 50px; height: 30px; } .light{ width: 150px; height: 150px; background: #666; color: #fff; } </style> </head> <body> <ul id='uls'> <li>600元优惠券</li> <li>800元优惠券</li> <li>1000元优惠券</li> <li>800元优惠券</li> <li><button id='btn1'>开始</button> <button id='btn2'>停止</button></li> <li>600元优惠券</li> <li>600元优惠券</li> <li>1000元优惠券</li> <li>800元优惠券</li> </ul> <script> var btn1=document.getElementById("btn1"); var btn2=document.getElementById("btn2"); var arr=[0,1,2,5,8,7,6,3];//按这个下标依次旋转 var lis=document.getElementsByTagName("li"); var num=0; //定义初识下标 btn1.onclick=function(){ btn1.disabled=true; time=setInterval(function(){ lis[arr[num]].className=""; num++; if(num>7){ num=0; } lis[arr[num]].className="light"; },50) } btn2.onclick=function(){ btn1.disabled=false; clearInterval(time); } </script> </body> </html ！