效果图：

代码块：

<!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. 把一个集合自定转成json字符串
			
    List<CityData> listData =new List<CityData>(); //把一个集合自定转成json字符串. foreach (var city in  ...
    
			
    2. 
						
  2. Linux基础篇–shell脚本编程基础
			
    本章内容概要  编程基础  脚本基本格式  变量  运算  条件测试  配置用户环境 7.1 编程基础程序:指令+数据程序编程风格:   过程式:以指令为中心,数据服务于指令   对象式:以数据为中心 ...
    
			
    3. 
						
  3. 【Alpha】Phylab 测试报告
			
    PhyLab Alpha 测试报告 测试中发现的bug Bug 可能原因 实验区域发布评论,如果需要验证码,无法填写 评论频率过快,实验区未接入验证码系统 忘记密码,但无邮件发送 忘记密码部分暂未修复 ...
    
			
    4. 
						
  4. OI中一些常见实用的套路【更新中】
			
    数据结构 在维护树上路径时,如果只是点的独立的加减,可以考虑用括号序来维护(拆成两部分) 需要求树上很多路径中k近/距离和 一类,考虑点分治/在点分树上解决. 子树求和可以转化为DFS序上区间求和 树 ...
    
			
    5. 
						
  5. ator自动生成mybatis配置和类信息
			
    generator自动生成mybatis的xml配置.model.map等信息: 1.下载mybatis-generator-core-1.3.2.jar包.        网址:http://cod ...
    
			
    6. 
						
  6. SpringMVC初写（六）静态资源设置
			
    众所周知,SpringMVC的DispatchServlet是不可以以/*规则拦截请求的,否则会将JSP都拦截了,但有时候我们的请求路径是不能有后缀(Resful风格的接口需要),基于上述情况,我们可 ...
    
			
    7. 
						
  7. C#多线程学习一
			
    一.概述:C#支持多线程并行执行程序,一个线程有他单独的执行路径,能够与其他线程同时执行,一个程序是由一个单线程开始,该单线程由CLR(公共语言运行时)和操作系统创建而成,并具有多线程创建额外线程的功 ...
    
			
    8. 
						
  8. AngularJs双向绑定详解
			
    双向绑定的三个重要方法: $scope.$apply() $scope.$digest() $scope.$watch() 一.$scope.$watch() 我理解的$watch就是将对某个数据的监 ...
    
			
    9. 
						
  9. dip,px,sp区别及使用场景
			
    1.区别 dip(device independent pixels)——设备独立像素:这个和设备硬件有关,一般哦我们为了支持WCGA.HVGA和QVGA推荐使用这个,不依赖于像素.等同于dp. px ...
    
			
    10. 
						
  10. hibernate与ibatis的区别
			
    Hibernate 是当前最流行的O/R mapping框架,当前版本是3.05.它出身于sf.net,现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架,当前 ...
    
			
    11.