效果图：

代码块：

<!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. vue封装插件并发布到npm上
			
    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...
    
			
    2. 
						
  2. 'qt_sql_default_connection' is still in use
			
    出现这个告警是因为打开了多个db而没有及时关闭,网上搜了答案是使用完了执行 QSqlDatabase::removeDatabase(m_connectionName); 泄漏的问题有所改善,但点快了 ...
    
			
    3. 
						
  3. (转)WordPress常用模板函数 修改或自制WordPress主题必备
			
    对于很多WordPress新手来说,不懂任何代码的情况下去瞎改WordPress主题,得出的效果往往会出现语法错误之类的东西或效果不尽人意.想要修改 WordPress主题模板文件最基本的当然要懂得H ...
    
			
    4. 
						
  4. Windows Server 2008 R2 Enterprise 上用 SqlServer 2008 R2 创建发布出现异常
			
    标题: 新建发布向导------------------------------ SQL Server 无法将“AC”配置为分发服务器. ------------------------------其 ...
    
			
    5. 
						
  5. javascript004_ECMA5数组新特性
			
    •对于ECMAscript5这个版本的Array新特性补充: –位置方法:indexOf      lastIndexOf –迭代方法:every  filter   forEach   some   ...
    
			
    6. 
						
  6. Jmeter创建FTP测试计划
			
    创建FTP测试计划 在这一章,你将学习如何创建一个基础的测试计划来测试FTP站点.你将在一个FTP站点上的两个文件中创建四个用户来发送请求.并且,你将告诉用户运行测试两次.所以,总的请求数是(4个用户 ...
    
			
    7. 
						
  7. select2 使用教程
			
    用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下 ...
    
			
    8. 
						
  8. JavaScript数据结构-16.二叉树计数
			
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
			
    9. 
						
  9. WPF解决当ScrollViewer中嵌套ItemsControl时，不能使用鼠标来滚动翻页
			
    1. ScrollViewer:滚动条容器,当内容超过指定的长度和宽度后,就会出现滚动条,而且可以使用鼠标中键来滚动, 简单例子如下: <Window x:Class="Connect ...
    
			
    10. 
						
  10. subset II
			
    Subsets II Given a collection of integers that might contain duplicates, nums, return all possible s ...
    
			
    11.