效果图：

代码块：

<!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. Cassandra2.0.8导入到eclipse运行
			
    如果想通过eclipse来调试或者查看Cassandra的代码,将其project导入到eclipse之中不愧是个好选择.下面将讲述将2.0.8 版本导入elcipse的过程. 该篇文章主要参考的官方 ...
    
			
    2. 
						
  2. 把一个集合自定转成json字符串
			
    List<CityData> listData =new List<CityData>(); //把一个集合自定转成json字符串. foreach (var city in  ...
    
			
    3. 
						
  3. Java NIO学习与记录（六）： NIO线程模型
			
    NIO线程模型 上一篇说的是基于操作系统的IO处理模型,那么这一篇来介绍下服务器端基于IO模型和自身线程的处理方式. 一.传统阻塞IO模型下的线程处理模式 这种处理模型是基于阻塞IO进行的,上一篇讲过 ...
    
			
    4. 
						
  4. 织梦dede解决“更新数据库archives表时出错＂方法
			
    登陆dedecms网站管理后台,选择执行 sql命令工具,将下列命令执复制进去并执行多行执行,该问题就可以解决. alter table `idea_archives` ADD `voteid` me ...
    
			
    5. 
						
  5. BigDecimal加减乘除运算（转）
			
    java.math.BigDecimal.BigDecimal一共有4个够造方法,让我先来看看其中的两种用法: 第一种:BigDecimal(double val) Translates a doub ...
    
			
    6. 
						
  6. php实现函数可变参数列表
			
    使用func_get_args().func_num_args().func_get_arg() 可以构造一个可变参数列表的函数. 首先大致介绍以上三个函数. (1)array func_get_ar ...
    
			
    7. 
						
  7. unity代码创建草和模拟风的效果
			
    void Start() { Test4(); } //草 private Vector3[] grassArray = new Vector3[7]; private GameObject gras ...
    
			
    8. 
						
  8. ubuntu 16.04安装好后没声音的解决方法
			
    刚安装好Ubuntu16.04 后没声音,找了好多方法都不行,看到网上说通过安装pavucontrol和alsamixer调节解决,最后无意发现一个方法,总算是可以用了,在此记录一下.可能有的可以解决 ...
    
			
    9. 
						
  9. Ibatis框架之系统架构
			
    如果用最简洁的话来总结 iBATIS 主要完成那些功能时,我想下面几个代码足够概括. Class.forName("oracle.jdbc.driver.OracleDriver" ...
    
			
    10. 
						
  10. 11 java 线程池 使用实例
			
    在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统 ...
    
			
    11.