js旋转和添加问题？？？？急急急
我的效果是这样的，让他显示3列，每列下面有个文本显示编号，一共12个，谁帮我改下啊，我js不是很擅长，谢谢了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>before my eyes - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html { overflow: hidden; }
body { background: #000; width:100%; height:100%; margin:0; }
#screen { position: absolute; width: 100%; height: 100%; }
#img { visibility: hidden; }
#screen img { position:absolute; left:-10000px; z-index:100; -ms-interpolation-mode:nearest-neighbor; image-rendering: optimizeSpeed; cursor: pointer; border:#333 solid 1px; }
#tit { text-align:center; position:absolute; color:#fff; font-family:verdana; font-weight:bold; font-size:48px; filter: alpha(opacity=30); opacity: 0.3; width:100%; bottom:12px; z-index:10000; }
</style>
<script type="text/javascript">
var diapo = function () {
var object = new Array(),
K = Math.PI / 180,<!--转动时间-->
N = 0,
xm = 0,
ym = 0,
mx = 0,
my = 0,
ax = 0,
ay = 0,
Nb = 0,
tit = 0,
img = 0;
////////////////////
var zM = 20;
////////////////////
var CObj = function (N, x, y, z){
var I = img.getElementsByTagName("img")[N % img.getElementsByTagName("img").length];
var o = document.createElement("img");
o.onclick = function () {
if (object[N].on == true) object[N].on = false;
else object[N].on = true;
}
o.onmouseover = function () {
if (Nb != N) {
Nb = N;
tit.innerHTML= I.alt;
}
}
o.onmouseout = function () {
Nb = -1;
object[N].on = false;
}
o.onmousedown = new Function("return false");<!--鼠标点击事件-->
o.src = I.src;
scr.appendChild(o);
this.obj = o.style;
this.z = Math.round(z * ny * .10);
this.x = Math.round(x * ny * .10);
this.y = Math.round(y * ny * .10);
this.on = false;
this.zOOm = 2;
this.N = N;
}
CObj.prototype.anim = function () {
var xP = this.z * Math.sin(mx * K) + this.x * Math.cos(mx * K);
var zP = this.z * Math.cos(mx * K) - this.x * Math.sin(mx * K);
var yP = this.y * Math.cos(my * K) - zP * Math.sin(my * K);
zP = this.y * Math.sin(my * K) + zP * Math.cos(my * K);
var w = (zP * .10 + ny * .10) * this.zOOm;
var h = w * .6;
if (this.on && zP > 0) {
if (this.zOOm < zM) this.zOOm += .05;
} else {
if (this.zOOm > 1) this.zOOm -= .025;
}
this.obj.left = Math.round(xP + nx * .5 - w * .5) + "px";
this.obj.top = Math.round(yP + ny * .5 - h * .5) + "px";
this.obj.width = Math.round(w) + "px";
this.obj.height = Math.round(h) + "px";
this.obj.zIndex = Math.round(1000 + w);
}
var run = function () {
dx = (1 * xm) - mx;
//dy = (1 * ym) - my;
dy = 60;//正数向上 负数向下
mx += dx / 60;
my += dy / 60;
var i = 0, o;
while (o = object[i++]) o.anim();
setTimeout(run, 16);
}
var resize = function () {
nx = scr.offsetWidth;
ny = scr.offsetHeight * .9;
}
var init = function () {
scr = document.getElementById("screen");
img = document.getElementById("img");
tit = document.getElementById("tit");
resize();
scr.onselectstart = new Function("return false");
onresize = resize;
scr.onmousemove = function(e){<!--鼠标事件-->
ym = (e.y || e.clientY);
}
object.push( new CObj(0,1,-1,-1) );
object.push( new CObj(1,1,1,-1) );
object.push( new CObj(2,-1,-1,-1) );
object.push( new CObj(3,-1,1,-1) );
object.push( new CObj(4,1,-1,1) );
object.push( new CObj(5,1,1,1) );
object.push( new CObj(6,-1,-1,1) );
object.push( new CObj(7,-1,1,1) );
run();
}
////////////////////////////////////////////////////////////
return {
init : init
}
}();
onload = function (){
diapo.init();
}
</script>
</head>
<body>
<div id="screen">
<div id="img">
<img alt="js旋转和添加有关问题？" src="images/41800.jpg">
<img alt="js旋转和添加有关问题？" src="images/20800.jpg">
<img alt="js旋转和添加有关问题？" src="images/238000.jpg">
<img alt="js旋转和添加有关问题？" src="images/44800.jpg">
<img alt="js旋转和添加有关问题？" src="images/49800.jpg">
<img alt="js旋转和添加有关问题？" src="images/218000.jpg">
<img alt="js旋转和添加有关问题？" src="images/23800.jpg">
</div>
<div id="tit" ></div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>before my eyes - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html { overflow: hidden; }
body { background: #000; width:100%; height:100%; margin:0; }
#screen { position: absolute; width: 100%; height: 100%; }
#img { visibility: hidden; }
#screen div { position:absolute; left:-10000px; z-index:100; -ms-interpolation-mode:nearest-neighbor; image-rendering: optimizeSpeed; cursor: pointer; border:#333 solid 1px; }
#screen img {
width:100%;
height:100%;
}
#tit { text-align:center; position:absolute; color:#fff; font-family:verdana; font-weight:bold; font-size:48px; filter: alpha(opacity=30); opacity: 0.3; width:100%; bottom:12px; z-index:10000; }
#screen div {
display:inline-block;
}
#screen div span{
position:absolute;
text-align: center;
width:100%;
font-size:20%;
left:0;
top:100%;
color:#FFF;
}
#index{position:absolute;bottom:100px}
#index span{position: absolute;text-align: center;}
</style>
<script type="text/javascript">
var diapo = function () {
var object = new Array(),
K = Math.PI / 180,<!--转动时间-->
N = 0,
xm = 0,
ym = 0,
mx = 0,
my = 0,
ax = 0,
ay = 0,
Nb = 0,
tit = 0,
img = 0;
////////////////////
var zM = 20;
////////////////////
var CObj = function (N, x, y, z){
var I = img.getElementsByTagName("img")[N % img.getElementsByTagName("img").length];
var o = document.createElement("img");
var s = document.createElement("span");
var d = document.createElement("div");
o.onclick = function () {
if (object[N].on == true) object[N].on = false;
else object[N].on = true;
}
o.onmouseover = function () {
if (Nb != N) {
Nb = N;
tit.innerHTML= I.alt;
}
}
o.onmouseout = function () {
Nb = -1;
object[N].on = false;
}
o.onmousedown = new Function("return false");<!--鼠标点击事件-->
o.src = I.src;
s.innerHTML = N;
d.appendChild(s);
d.appendChild(o);
scr.appendChild(d);
this.obj = d.style;
this.z = Math.round(z * ny * .10);
this.x = Math.round(x * ny * .10);
this.y = Math.round(y * ny * .10);
this.on = false;
this.zOOm = 2;
this.N = N;
}
CObj.prototype.anim = function () {
var xP = this.z * Math.sin(mx * K) + this.x * Math.cos(mx * K);
var zP = this.z * Math.cos(mx * K) - this.x * Math.sin(mx * K);
var yP = this.y * Math.cos(my * K) - zP * Math.sin(my * K);
zP = this.y * Math.sin(my * K) + zP * Math.cos(my * K);
var w = (zP * .10 + ny * .10) * this.zOOm;
var h = w * .6;
if (this.on && zP > 0) {
if (this.zOOm < zM) this.zOOm += .05;
} else {
if (this.zOOm > 1) this.zOOm -= .025;
}
this.obj.left = Math.round(xP + nx * .5 - w * .5) + "px";
this.obj.top = Math.round(yP + ny * .5 - h * .5) + "px";
this.obj.width = Math.round(w) + "px";
this.obj.height = Math.round(h) + "px";
this.obj.zIndex = Math.round(1000 + w);
}
var run = function () {
dx = (1 * xm) - mx;
//dy = (1 * ym) - my;
dy = 60;//正数向上 负数向下
mx += dx / 60;
my += dy / 60;
var i = 0, o;
while (o = object[i++]) o.anim();
setTimeout(run, 16);
}
var resize = function () {
nx = scr.offsetWidth;
ny = scr.offsetHeight * .9;
}
var init = function () {
scr = document.getElementById("screen");
img = document.getElementById("img");
tit = document.getElementById("tit");
resize();
scr.onselectstart = new Function("return false");
onresize = resize;
// scr.onmousemove = function(e){<!--鼠标事件-->
// ym = (e.y
[解决办法]
e.clientY);
// }
object.push( new CObj(0,2,-1,-1));
object.push( new CObj(1,2,1,-1) );
var col1 = new CObj(2,2,-1,1);
object.push( col1 );
object.push( new CObj(3,2,1,1) );
object.push( new CObj(4,0,-1,-1) );
object.push( new CObj(5,0,-1,1) );
var col2 =new CObj(6,0,1,-1);
object.push( col2 );
object.push( new CObj(7,0,1,1) );
object.push( new CObj(8,-2,-1,-1) );
object.push( new CObj(9,-2,1,-1) );
var col3 =new CObj(10,-2,-1,1);
object.push( col3 );
object.push( new CObj(11,-2,1,1) );
run();
var index = document.getElementById("index").childNodes;
index[2].style.marginLeft = col1.obj.left;
index[2].style.width = col1.obj.width;
index[1].style.marginLeft = col2.obj.left;
index[1].style.width = col2.obj.width;
index[0].style.marginLeft = col3.obj.left;
index[0].style.width = col3.obj.width;
}
////////////////////////////////////////////////////////////
return {
init : init
}
}();
onload = function (){
diapo.init();
}
</script>
</head>
<body>
<div id="screen">
<div id="img">
<img alt="js旋转和添加有关问题？" src="images/41800.jpg">
<img alt="js旋转和添加有关问题？" src="images/20800.jpg">
<img alt="js旋转和添加有关问题？" src="images/238000.jpg">
<img alt="js旋转和添加有关问题？" src="images/44800.jpg">
<img alt="js旋转和添加有关问题？" src="images/49800.jpg">
<img alt="js旋转和添加有关问题？" src="images/218000.jpg">
<img alt="js旋转和添加有关问题？" src="images/23800.jpg">
</div>
<div id="tit" ></div>
<div id="index" style="color:#FFF"><span>1</span><span>2</span><span>3</span></div>
</div>
</body>
</html>
