效果图：

代码块：

<!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. 手动启动 oracle 服务
			
      手动启动 Oracle 服务 为了学习,我们常常会在个人PC上安装 Oracle 数据库,这大大影响了计算机的运行速度,尤其是计算机开机速度,如果 Oracle 使用频率并不是非常高,我们可以禁止 ...
    
			
    2. 
						
  2. SpringBoot整合JdbcTemplate连接Mysql
			
    import java.io.IOException; import javax.sql.DataSource; import org.apache.ignite.IgniteSystemProper ...
    
			
    3. 
						
  3. bzoj3956: Count (单调栈+st表)
			
    题面链接 bzoj 题解 非常巧妙的一道题 类似[hnoi影魔] 每个点会给左右第一个大于它的点对产生贡献 可以用单调栈求出 这里有点小细节,就是处理相等的点时,最左边的点管左边的贡献,最右边的点管最 ...
    
			
    4. 
						
  4. Jupyter Notebook & Spyder 常用快捷键
			
    Jupyter Notebook: 1. "shift + enter" notebook单元格内执行代码,并且自动跳至下一个的单元格 2. "tab" 自动补 ...
    
			
    5. 
						
  5. chm 已取消到该网页的导航，打不开！
			
    方法 11. 双击此 .chm 文件. 2. 在“打开文件安全警告”对话框,单击以清除“打开此文件前始终询问”复选框. 3. 单击“打开”. 方法 21. 右键单击该 CHM 文件,然后单击“属性”. ...
    
			
    6. 
						
  6. 【转载】TableLayout表格布局详解
			
    原文地址:http://www.cnblogs.com/manuosex/p/3584701.html 一.Tablelayout简介 Tablelayout类以行和列的形式对控件进行管理,每一行为一 ...
    
			
    7. 
						
  7. Sublime Text 3新建工程
			
    1. 创建工程 Project > Add Folder to Project 这时在sidebar中将出现刚刚添加的文件目录,如果还需要添加其他目录,则重复这一操作即可. 2. 保存工程 Pr ...
    
			
    8. 
						
  8. Visual Studio 跨平台開發實戰(1) - Hello Xamarin! (转帖)
			
    前言 應用程式發展的腳步, 從來沒有停過. 從早期的Windows 應用程式, 到網路時代的web 應用程式, 再到近幾年相當盛行的行動裝置應用程式(Mobile Application), 身為C# ...
    
			
    9. 
						
  9. mongo 与 传统mysql语法对比
			
    MongoDB语法                                  MySql语法 db.test.find({'name':'foobar'})<==> select  ...
    
			
    10. 
						
  10. 【数组】Triangle
			
    题目: Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjace ...
    
			
    11.