这个3D轮播切换特效是我2017年2月份写的
当初我 刚接触HTML不久，现在把源码分享给大家
源码的注释超级清楚 。
<!--
声明文档类型:html
作用:符合w3c统一标准规范
每个浏览器对html css js都有自己的编码模式(兼容模式)
--> 无序列表标签 盒子模型标签 img图片标签四要素
1 <!-- 2 声明文档类型:html 3 作用:符合w3c统一标准规范 4 每个浏览器对html css js都有自己的编码模式(兼容模式) 5 --> 6 <!doctype html> 7 <html lang="en"><!--根目录节点标签--> 8 <head><!--规定一些信息 用户看不到(非可视化标签)--> 9 <meta charset="utf-8"><!--字符编码:国际编码--> 10 <!--网页文档的三要素--> 11 <title>3D轮翻切换特效</title> 12 <meta name="keywords" content="关键词:提供给搜索引擎"> 13 <meta name="description" content="描述:对网页内容的大概的介绍"> 14 <style>/*css样式*/ 15 *{/*通配符:选择到所有的标签元素*/ 16 margin:0;/*外边距*/ 17 padding:0;/*内边距*/ 18 } 19 #banner{/* # id选择器*/ 20 position:relative;/*相对定位:参考物 相对于自己本身的位置定位*/ 21 width:790px;/*宽度*/ 22 height:420px;/*高度*/ 23 background:#000; 24 margin:150px auto;/*上下150 左右自动(居中)*/ 25 } 26 #banner ul li{ 27 position:absolute;/*绝对定位:相对于拥有定位属性(relative/absolute/fixed)的最近的父元素定位*/ 28 list-style:none;/*去除小黑点*/ 29 width:240px; 30 height:420px; 31 /*border:2px solid red;边框:宽度 类型(实线) 颜色*/ 32 opacity:0.3;/*透明度:0-1*/ 33 z-index:0; 34 } 35 #banner ul li.first{ 36 width:380px; 37 height:620px; 38 left:205px;/*距离参考物左端的距离*/ 39 top:-100px;/*距离参考物上端的值*/ 40 z-index:10;/*层级:值越大越显示在前面*/ 41 opacity:1;/*不透明*/ 42 } 43 #banner ul li.second{ 44 left:0; 45 top:0; 46 } 47 #banner ul li.last{ 48 left:550px; 49 top:0; 50 } 51 #banner ul li.center{ 52 left:275px; 53 top:0; 54 } 55 .btn div{ 56 position:absolute; 57 top:50%; 58 width:40px; 59 height:70px; 60 color:#fff;/*文本颜色*/ 61 font-size:60px;/*字体尺寸*/ 62 text-align:center;/*文本左右对齐方式:居中*/ 63 line-height:70px;/*行高*/ 64 font-weight:bold;/*文本加粗*/ 65 cursor:pointer;/*鼠标手形状*/ 66 } 67 .btn div.left{ 68 left:0; 69 } 70 .btn div.right{ 71 right:0;/*距离参考物右边的距离*/ 72 } 73 .btn div:hover{/*鼠标悬停在上面实现上面效果*/ 74 background:#666; 75 } 76 </style> 77 </head> 78 <body> 79 <!--盒子模型标签 div 宽度 高度 位置 边框--> 80 <div id="banner"><!--id="自定义的名称" 唯一的(身份证)命名规范(见名知意:用有语义的英文单词)--> 81 <ul><!--无序列表标签--> 82 <li class="first"><!--class类名 可重复(姓名)--> 83 <!-- 路径/宽度 /高度/解释说明--> 84 <!--img图片标签四要素 src width height alt--> 85 <img src="images/1.jpg" width="100%" height="100%"> 86 </li> 87 <li class="second"> 88 <img src="images/2.jpg" width="100%" height="100%"> 89 </li> 90 <li class="center"> 91 <img src="images/3.jpg" width="100%" height="100%"> 92 </li> 93 <li class="center"> 94 <img src="images/4.jpg" width="100%" height="100%"> 95 </li> 96 <li class="last"> 97 <img src="images/5.jpg" width="100%" height="100%"> 98 </li> 99 <div class="btn"> 100 <div class="left"> < </div> 101 <div class="right"> > </div> 102 </div> 103 </ul> 104 </div> 105 <script src="js/jquery.js"></script> 106 <script> 107 //alert($);//弹出jq的代理函数$ 108 //$(".left")选择到左按钮 109 $(".left").click(function(){//点击实现什么功能 110 //实现图片往左边轮播切换 111 change(0) 112 }); 113 $(".right").click(function(){//点击实现什么功能 114 //实现图片往右边轮播切换 115 change(1) 116 }); 117 118 //封装交换的函数 dir交换的方向 119 function change(dir){ 120 //定义数组来存储每个li的宽高 定位 层级 透明度 121 var arrW = [],arrH = [],arrL = [],arrT = [],arrZ = [],arrO = []; 122 //获取所有的li标签循环获取每个li($(this))的属性值 123 $("#banner ul li").each(function(i){ 124 arrW[i] = $(this).css("width"); 125 arrH[i] = $(this).css("height"); 126 arrL[i] = $(this).css("left"); 127 arrT[i] = $(this).css("top"); 128 arrZ[i] = $(this).css("z-index"); 129 arrO[i] = $(this).css("opacity"); 130 }); 131 132 //console.log(arrW); 133 //交换每个li的属性值 134 $("#banner ul li").each(function(i){ 135 var index; 136 if(dir == 0)//往左边交换 137 { 138 index=i-1; 139 if (index < 0) 140 { 141 index = 4; 142 } 143 //animate()自定义动画 在一段时间之内改变值 144 $(this).animate({ 145 width:arrW[index], 146 height:arrH[index], 147 left:arrL[index], 148 top:arrT[index], 149 "z-index":arrZ[index], 150 opacity:arrO[index], 151 },500) 152 153 }else{//否则往右边交换 154 index=i+1; 155 if (index > 4) 156 { 157 index = 0 158 } 159 $(this).animate({ 160 width:arrW[index], 161 height:arrH[index], 162 left:arrL[index], 163 top:arrT[index], 164 "z-index":arrZ[index], 165 opacity:arrO[index], 166 },500) 167 } 168 }); 169 } 170 </script> 171 </body> 172 </html>