Graphic and text examples of 3D picture switching in js-JS Tutorial-php.cn

Graphic and text examples of 3D picture switching in js

零下一度

Release： 2017-06-30 11:16:50

Original

1307 people have browsed it

Rendering:

Code block:

<!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;

Copy after login

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//这样得出左边第一张图片的距离；
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//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>

Copy after login

The above is the detailed content of Graphic and text examples of 3D picture switching in js. For more information, please follow other related articles on the PHP Chinese website!