javascript实现3D图片轮播弹性效果
发布在前端菜鸟2016年7月22日view:1731BrettBatj's插件HTML
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

<!DOCTYPE html> enter image description here <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图片轮播弹性效果

评论
发表评论
11个月前

欢迎大家加入—极乐问答平台,一个提供给开发者的技术

交流平台。 技术交流群—JavaScript问答交流群 Java问答交流群 Android开发问答交流群 iOS开发问答交流群 欢迎加入!

11个月前

欢迎大家加入—极乐问答平台,一个提供给开发者的技术

交流平台。

技术交流群—JavaScript问答交流群 Java问答交流群 Android开发问答交流群 iOS开发问答交流群 欢迎加入!

11个月前
赞了此文章!
11个月前
添加了一枚【评注】:>欢迎大家加入—[极乐问答平台](http://www.dreawer.com/),一个提供给开发者的技术 交流平台。 >技术交流群—[JavaScript问答交流群](http://jq.qq.com/?_wv=1027&k=2IpW3RL) [Java问答交流群](http://jq.qq.com/?_wv=1027&k=29qxbHX) [Android开发问答交流群](http://jq.qq.com/?_wv=1027&k=2A5vyqc) [iOS开发问答交流群](http://jq.qq.com/?_wv=1027&k=2ArRZ5C) 欢迎加入!
WRITTEN BY
前端菜鸟
前端菜鸟是为前端初学者提供div+css、html5+css3、JavaScript、jquery、前端web开发、移动端html5开发集一体的前端知识以及前端资讯网站!
TA的新浪微博
PUBLISHED IN
前端菜鸟

和大家共同交流javascript技术

我的收藏