JS旋转图片阵类

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS旋转图片阵效果 brought to you by 斩梦人.天天 qq: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></head> <body> <span>使用方法</span>: 首先定义一个imgRound类: <span>var rt = new imgRound（"imgContainer", 120, 90, 500, 220, 230, 0.01）</span> 然后使用定时函数调用imgRound实例的roundMove方法: <span>setInterval（function（）{rt.roundMove（）}, 20）</span> <script> window.onload=function（）{ var rt=new imgRound（"imgContainer",120,90,300,80,230,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; //旋转速度 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; //图片数量 var ed=pi*2/pn; for （n=0;n<img src="http://www.lululu520.cn/blueidea/images/s1.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s2.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s3.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s4.jpg" link="http://www.baidu.com" target="_blank"/> <img src="http://www.lululu520.cn/blueidea/images/s5.jpg" link="http://www.google.com"/> <img src="http://www.lululu520.cn/blueidea/images/s1.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s2.jpg"/> <img src="http://www.lululu520.cn/blueidea/images/s3.jpg"/>参数说明: initRound（id,w,h,x,y,r,dv,rh,ah）; id: 容器ID w: 图片宽度 h: 图片高度 x: 圆心水平位置 y: 圆心垂直位置 r: 圆圈半径 dv: 旋转速度 rh: 垂直距离 （可选,默认为10） ah: 旋转方向 （可选,1:顺时针,2:逆时针,默认为1） <body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]