<!DOCTYPE html>
<title>javascript实现3D图片轮播弹性效果</title>
<link href="zns_style.css" rel="stylesheet" type="text/css" />
<script src="domove.js"></script>
<script>
window.onload=function(){
var aBtnRight=document.getElementById("btn1");
var aBtnLeft = document.getElementById('btn2');
var aLi=document.getElementsByTagName("li");
var aImg=document.getElementsByTagName("img");
var aA = document.getElementsByTagName('a');
var oBox=document.getElementById("oBox");
var aMsg=[];
var timer=null;
aA[0].onclick=function(){
aMsg.push(aMsg.shift());
tab();
return false;
}
aA[2].onclick=function(){
aMsg.unshift(aMsg.pop());
tab();
return false;
}
for(var i=0;i<aLi.length;i++){
aMsg.push({
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop,
opacity:getStyle(aImg[i],'opacity'),
imgT:aImg[i].offsetTop,
imgW:aImg[i].offsetWidth,
fnClick:aA[i].onclick
})
}
function tab(){
for(var i=0;i<aLi.length;i++){
doMove(aLi[i],{left:aMsg[i].left,top:aMsg[i].top})
doMove(aImg[i],{opacity:aMsg[i].opacity,top:aMsg[i].imgT,width:aMsg[i].imgW});
aA[i].onclick = aMsg[i].fnClick;
}
}
function motion(){
aMsg.unshift(aMsg.pop());
tab();
}
timer=setInterval(motion,2000)
oBox.onmouseover=function(){
aBtnRight.style.display="block";
aBtnLeft.style.display="block";
clearInterval(timer);
}
oBox.onmouseout=function(){
aBtnRight.style.display="none";
aBtnLeft.style.display="none";
timer=setInterval(motion,2000)
}
aBtnRight.onclick=function(){
aMsg.push(aMsg.shift());
tab()
}
aBtnLeft.onclick=function(){
aMsg.unshift(aMsg.pop());
tab()
}
}
</script>
</head>
<body>
<div class="oBox" id="oBox">
<input type="button" value="右" id="btn1" />
<input type="button" value="左" id="btn2" />
</body>
</html>
前端菜鸟：javascript实现3D图片轮播弹性效果
