图片3d轮放查看效果
来源：程序员人生 发布时间：2014-09-17 02:56:29 阅读次数：1858次
本功能比较简单，就是一个大幕，左右滚动播放图片。
关键点在于如何实现平滑的滚动，包括动画效果，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>
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
