[js实现3d图片展示效果图]js实现3D图片展示效果

【www.bbyears.com--js教程】

点击左上角的按钮前后切换

效果图：

代码如下：

 

<script>

window.onload = function(){

 var oPrev = document.querySelector('.prev_btn');

 var oNext = document.querySelector('.next_btn');

 var aLi = document.querySelectorAll('ul li');

 var aClass = [];

 for(var i=0;i

 aClass[i] = aLi[i].className;

 }

 varbOk=false;

 oPrev.onclick=function(){

 if(bOk)return;

 bOk=true;

 aClass.push(aClass.shift());

 change();

 };

 oNext.onclick=function(){

 if(bOk)return;

 bOk=true;

 aClass.unshift(aClass.pop());

 change();

 };

 function change(){

 for(vari=0;i

 aLi[i].style.WebkitTransition='.5s all ease';

 aLi[i].className=aClass[i];

 }

 varoCur=document.querySelector('.cur');

 function tranEnd(){

 oCur.removeEventListener('transitionend',tranEnd,false);

 bOk=false;

 }

 oCur.addEventListener('transitionend',tranEnd,false);

 }

};

</script>

 0

 1

 2

 3

 4

 5

 6

 7

 8

 9

 10

 11

 12

 13

本文来源：http://www.bbyears.com/wangyezhizuo/129889.html