这是一个原生JS、CSS实现的转盘效果（题目在这：http://www.cnblogs.com/arfeizhang/p/turntable.html），花了半个小时左右，准备睡觉，所以先贴一段代码，预计会抽空优化，让它在手机上也能运行；另外，如果看代码的时候有什么问题，请留言。。。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>转盘</title> 7 <style> 8 .holder { 9 width: 550px; 10 display: block; 11 margin: 10px auto; 12 padding: 20px; 13 border: 3px solid black; 14 border-radius: 10px; 15 position: relative; 16 } 17 .rotate-pointer { 18 display: block; 19 position: absolute; 20 width: 521px; 21 line-height: 10px; 22 top: 270.5px; 23 left: 37px; 24 -webkit-transition:all 4s ease-in-out; 25 } 26 #rules { 27 width: 260.5px; 28 height: 10px; 29 display: inline-block; 30 background-color: black; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div class="holder"> 37 <img src="//images0.cnblogs.com/i/636015/201406/151737329993303.jpg" alt=""> 38 <div > 39 <div ></div> 40 </div> 41 </div> 42 <script type="text/javascript"> 43 window.onload = function() { 44 var table = document.getElementsByClassName('holder')[0], 45 tablePointer = document.getElementById('pointer'), 46 getRandom = function(min, max) { 47 max = max || 1000; 48 min = min || 0; 49 return Math.floor(Math.random() * (max - min) + min); 50 }, 51 degree = 0, 52 min_circle_times = 2, 53 max_circle_times = 6, 54 translate = function() { 55 degree += getRandom(min_circle_times * 360, max_circle_times * 360); 56 57 requestAnimationFrame(function() { 58 tablePointer.style.webkitTransform = 'rotate(' + degree + 'deg)'; 59 }); 60 }; 61 table.onclick = translate; 62 63 }; 64 </script> 65 </body> 66 67 </html>