欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js中3d图片切换的图文实例

程序员文章站 2022-05-31 14:09:02
...
效果图:

js中3d图片切换的图文实例

代码块:

<!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图片切换的图文实例的详细内容,更多请关注其它相关文章!