图片3d轮放查看效果

来源：互联网发布：易语言网络验证编辑：程序博客网时间：2024/04/28 02:26

本功能比较简单，就是一个大幕，左右滚动播放图片。

关键点在于如何实现平滑的滚动，包括动画效果，3d效果等。

<style>img {position: absolute;top:200;left:400px;/*border: 1px solid #333;*/padding: 2px 5px 2px 5px;-webkit-transition:ease all 0.7s;-webkit-transform-origin: 50% 50% 600px;/*background: rgba(0,0,0,.3);*/width: 100px;height: 100px;z-index: -1;}.button {position: absolute;top:253px;width:20px;height: 60px;background: rgba(0,0,0,.3);padding-top:40px;vertical-align: middle;text-align: center;z-index: 2;}.button:hover {cursor: pointer;}.left {left:130px;}.right {left:870px;}.layerhidden {position: absolute;top:220px;width:160px;height: 200px;background: white;vertical-align: middle;text-align: center;z-index: 1;}.layerleft {left:0px;}.layerright {left:850px;}</style><script>var imgs;var leftStart=0;var showLength=7;var step = 0;function init() {imgs = document.getElementsByTagName("img");reshowImgs();}function turnLeft(){if(leftStart>0) {leftStart--;step++;reshowImgs();}else {alert("左边没有照片");}}function turnRight(){if(leftStart+showLength<imgs.length) {leftStart++;step--;reshowImgs();}else {alert("右边没有照片");}}function delayTransform(ind, yDeg){imgs[ind].style.webkitTransform = "perspective(500px) rotateY("+yDeg+"deg)";}function delayDisplay(ind,display){imgs[ind].style.display = display;}function reshowImgs() {var deg = Math.floor(showLength / 2);var timeDelay = 700;for(var i=0;i<leftStart;i++){imgs[i].style.webkitTransform = "perspective(500px) rotateY("+(deg+leftStart-i)*10+"deg)";setTimeout("delayDisplay("+i+",'none')",500);}for(var i=leftStart; i< leftStart+showLength;i++){imgs[i].style.display = "block";setTimeout("delayTransform("+i+","+(deg-(i-leftStart))*10+")",timeDelay/10);}for(var i=leftStart+showLength;i<imgs.length;i++){imgs[i].style.webkitTransform = "perspective(500px) rotateY("+(deg-i)*10+"deg)";setTimeout("delayDisplay("+i+",'none')",500);}}</script><img src="1.png" /><img src="2.png" /><img src="3.png" /><img src="4.png" /><img src="5.png" /><img src="6.png" /><img src="7.png" /><img src="8.png" /><img src="9.png" /><div id="left_button" class="button left" onclick="turnLeft()" style=""><</div><div id="right_button" class="button right" onclick="turnRight()" style="">></div><div class="layerhidden layerleft"></div><div class="layerhidden layerright"></div><script>init();</script>

0 0