<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> JS rotating Image array effect brought to you by mengren. qq every day: 22062019 </title> <style type = "text/css"> body {background: black; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 29px} span {border: 1px solid gray; background: #333; padding: 4px; font-weight: bold ;} </style> </pead> <body> usage: first define an imgRound class: var rt = new imgRound ("imgContainer", 120, 90,500,220,230, 0.01) then call the roundMove method of the imgRound instance using the scheduled function: setInterval (function () {rt. roundMove ()}, 20) <script> window. onload = function () {var rt = new imgRound ("imgContainer", 230, 90, 0.01,); setInterval (function () {rt. roundMove ()}, 20)} function imgRound (id, w, h, x, y, r, dv, rh, ah) {if (ah = undefined) ah = 1; if (rh = undefined) rh = 10; var dv = dv * ah; // rotation speed var pi = 3.1415926575; var d = pi/2; var pd = Math. asin (w/2/r); var smove = true; var imgArr = new Array (); var objectId = id; var o = document. getElementById (objectId); o. style. position = "relative"; var arrimg = o. getElementsByTagName ("img"); var pn = arrimg. length; // number of images var ed = pi * 2/pn; for (n = 0; n parameter description: initRound (id, w, h, x, y, r, dv, rh, ah); id: container ID w: Image Width h: Image Height x: center horizontal position y: center vertical position r: circle radius dv: rotation speed rh: vertical Distance (optional, 10 by default) ah: rotation direction (optional, 1: clockwise, 2: counterclockwise, 1 by default) <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]