js项目--多张图片显示出3D的效果(360度旋转)

一共有77张图片,通过鼠标可以将它们旋转.可以用左右键控制旋转.可以用button控制它们自动旋转.

html代码:

style代码:

js代码:

 
  
 //添加一些功能: 
  
 
  
//左右键
 
  
 
  
document.onkeydown = function(e){
               e = e ||window.event;
               if (e.keyCode ==37){
                   index --;
               }else if (e.keyCode == 39){
                   index ++;
               }
               lastIndex = index;
               showImg();
           };
//自动播放功能 
  
在html添加一个button
 
  
 
  

    自动旋转
js: 
  
 
  
var timer = ;
sutoRotate.onclick = function(){
this.auto = !this.auto;
//==true
if(this.auto){
this.innerHTML +='(激活)';
}else{
this.innerHTML = this.innerHTML.replace('(激活)','');
clearInterval(timer);
lastIndex = index;
return;
}
timer = setInterval(function(){
index++;
showImg();
},30)
}
 
  
 
  该项目主要是通过onmousemove中的拉动的距离来计算得到第几张图片. 
  
而左右键是通过直接计算第几张.自动旋转是用setInterval控制的.