js中3d图片切换的图文实例
程序员文章站
2022-05-23 09:54:05
...
效果图：
代码块：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background: #000000;
overflow-x: hidden;
}
#banner{
width: 300px;
height: 200px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
perspective: 800px;
}
#banner img{
width: 100%;
height: 100%;
position: absolute;
transition: all 1s ease-in 0s; /*改变时用过渡*/
-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1));
/*图片的阴影效果*/
}
#banner .left{ /*图片在左边的状态*/
transform: rotateY(45deg) translateZ(-100px);
}
#banner .right{ /*图片在右边的状态*/
transform: rotateY(-45deg) translateZ(-100px);
}
#banner .center{ /*图片在中间展示时的状态*/
transform: rotateY(0deg) translateZ(100px);
}
</style>
</head>
<body>
<div id="banner">
<img src="image/01.jpeg">
<img src="image/02.jpeg">
<img src="image/03.jpeg">
<img src="image/04.jpeg">
<img src="image/05.jpg">
<img src="image/06.png">
<img src="image/07.png">
<img src="image/05.jpg">
<img src="image/08.png">
</div>
<script type="text/javascript">
window.onload=function(){
var oImgs=document.getElementsByTagName("img"); //获取所有图片
var ban=Math.floor(oImgs.length/2); //去所有图片的中间值，取一下正数，因为没有为小数的下标
yun(ban)
function yun(ban){ //写一个图片改变状态的方法
for(var i=0;i<oImgs.length;i++){ //循环所有图片
if(i<ban){ //当图片小于中间值时说明在左边，添加左边的class名
oImgs[i].className="left";
oImgs[i].style.left= -((ban-i)*100) + "px";
//每张图片位置都有距离所以改变他的left值，当图片在左边的时候他的位置应该是负值。因为第一张图片离
//中间的最远所以 中间值减去 图片的下标 在乘一下你认为每张间隔的合适位置；这样左边就出来
//4-0 = 4 4*100=400 这样第一张就到了最远 以此类推
}else if(i>ban){
oImgs[i].className="right";
oImgs[i].style.left= ((i-ban)*100)+ "px";
//设置他的右边值，右边距离左边是正值 ，所以要是正的；还是和上面类似；
//当i值大于 中间值时；说明到右边了，添加右边的样式;
//5-4=1 1*100 = 100;
//这样得出左边第一张图片的距离；
//ps：因为图片的的顺序；左边先设的第一张；右边也是第一张；这样顺序就不会错。
}else if(i==ban){
oImgs[i].className="center";
oImgs[i].style.left= "0px";
}
}
}
for(var x=0;x<oImgs.length;x++){
oImgs[x].index=x;
oImgs[x].onclick=function(){
yun(this.index)
}
}
}
</script>
</body>
</html>
以上就是js中3d图片切换的图文实例的详细内容，更多请关注其它相关文章！