首页 > 代码库 > 3d图片点击切换

3d图片点击切换

2024-10-14 01:45:39   218人阅读

效果图：

 技术分享

 

代码块：

<!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="http://www.mamicode.com/image/01.jpeg">
			<img src="http://www.mamicode.com/image/02.jpeg">
			<img src="http://www.mamicode.com/image/03.jpeg">
			<img src="http://www.mamicode.com/image/04.jpeg">
			<img src="http://www.mamicode.com/image/05.jpg">
			<img src="http://www.mamicode.com/image/06.png">
			<img src="http://www.mamicode.com/image/07.png">
			<img src="http://www.mamicode.com/image/05.jpg">
			<img src="http://www.mamicode.com/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>






　　


 
3d图片点击切换






























        

            
                
                  
                
                

                    联系

                    我们