效果图：

代码块：

<!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="data:image/01.jpeg">

			<img src="data:image/02.jpeg">

			<img src="data:image/03.jpeg">

			<img src="data:image/04.jpeg">

			<img src="data:image/05.jpg">

			<img src="data:image/06.png">

			<img src="data:image/07.png">

			<img src="data:image/05.jpg">

			<img src="data: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图片点击切换的更多相关文章
	

    
								
  1. jquery.roundabout.js实现3D图片层叠旋转木马切换
		
    最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...
    
		
    2. 
						
  2. 一款基于css3的3D图片翻页切换特效
		
    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...
    
		
    3. 
						
  3. Js实现图片点击切换与轮播
		
    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
    
		
    4. 
						
  4. JS原生隐藏显示图片,点击切换图片的效果
		
    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
    
		
    5. 
						
  5. 关于使用JavaScript实现图片点击切换（附带改变导航图片 方案二）
		
    具体需求见方案一. 这种方案相比方案一更加专业. <!DOCTYPE html> <html> <head lang="en"> <met ...
    
		
    6. 
						
  6. vue入门：实现图片点击切换
		
    1.实现功能 2.目录结构 3.代码 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
    
		
    7. 
						
  7. CSS3新增文本属性实现图片点击切换效果
		
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    8. 
						
  8. 利用DOM的方式点击切换图片及修改文字
		
    本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...
    
		
    9. 
						
  9. jquery——左右按钮点击切换一组图片功能
		
    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Spring AOP 概述
			
    1. AOP的概念 AOP 是Aspect-Oriented Programming(面向方面编程或者面向切面)的简称,维基百科对其解释如下: Aspect是一种新的模块化机制,用来描述分散在对象.类 ...
    
			
    2. 
						
  2. servlet,listener,filter,interceptor的关系
			
    1.servlet:servlet是一种运行服务器端的java应用程序,具有独立于平台和协议的特性,并且可以动态的生成web页面,它工作在客户端请求与服务器响应的中间层.最早支持 Servlet 技术 ...
    
			
    3. 
						
  3. 使用scp命令，远程上传下载文件/文件夹
			
    1.从服务器下载文件 scp username@servername:/path/filename /local/path例如: scp ubuntu@117.50.20.56:/ygf/data/d ...
    
			
    4. 
						
  4. 基于iTop4412的FM收音机系统设计(三)
			
    说明:第一版架构为:APP+JNI(NDK)+Driver(linux),优点是开发简单,周期短,也作为自己的毕业设计 现在更新第二版,FM服务完全植入Android系统中,成为系统服务,架构为:AP ...
    
			
    5. 
						
  5. poj3250 Bad Hair Day  单调栈（递减）
			
    Bad Hair Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 24420   Accepted: 8292 Des ...
    
			
    6. 
						
  6. 威尔逊定理--HDU2973
			
    参考博客 HDU-2973 题目 Problem Description The math department has been having problems lately. Due to imm ...
    
			
    7. 
						
  7. Python使用浏览器模拟访问页面之使用ip代理
			
    最近需要使用浏览器模拟访问页面,同时需要使用不同的ip访问,这个时候就考虑到在使用浏览器的同时加上ip代理. 本篇工作环境为win10,python3.6. Chorme 使用Chrome浏览器模拟访 ...
    
			
    8. 
						
  8. 关于Arduino串口读写HEX
			
    每次和硬件层进行调试的时候,就容易遇到数据格式问题.这不,继上次Matlab上的hex发送后,又遇到了Arduino上接收hex,并进行对比处理的问题.由于单片机级别的处理器只能以字节形式接收,因此无 ...
    
			
    9. 
						
  9. SQL中动态进行行转列
			
    课程表 CREATE TABLE [dbo].[demo_Course]( [Cid] [uniqueidentifier] NOT NULL, ) NULL, CONSTRAINT [PK_demo ...
    
			
    10. 
						
  10. 祝福csdn回望2014,展望2015 大致可以这样总结和展望
			
    祝福CSDN回望2014,展望2015 大致可以这样总结和展望 回望2014,大致可以这样总结: 从寻觅一架飞机开始,到寻觅另一架飞机结束,中间觅了几天金正恩. 全年都在寻觅收钱的人.送钱的人和带着钱 ...
    
			
    11.