JS+CSS3实现带预览图幻灯片效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS+CSS3实现带预览图幻灯片效果相关的知识，希望对你有一定的参考价值。
这个案例学习起来还有点吃力，目前还没有独自自己写出来过，贴出来以免忘记。
慕课网该课程原地址：http://www.imooc.com/learn/412
源码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 body{ 9 padding: 50px 0; 10 background-color: #FFF; 11 font-size: 14px; 12 font-family: ‘Avenir Next‘; 13 color: #555; 14 } 15 .slider .main .main-i, 16 .slider .main, 17 .slider{ 18 width: 100%; 19 height: 400px; 20 position: relative; 21 } 22 /*幻灯片区域*/ 23 .slider .main{ 24 overflow: hidden; 25 } 26 /*每一个幻灯片的样式*/ 27 .slider .main .main-i{} 28 .slider .main .main-i img{ 29 width: 100%; 30 position: absolute; 31 left: 0; 32 top: 0; 33 z-index: 1; 34 } 35 .slider .main .main-i .caption{ 36 position: absolute; 37 right: 50%; 38 top: 30%; 39 z-index: 9; 40 } 41 .slider .main .main-i .caption h2{ 42 font-size: 40px; 43 line-height: 50px; 44 color: #B5B5B5; 45 text-align: right; 46 } 47 .slider .main .main-i .caption h3{ 48 font-size: 70px; 49 line-height: 70px; 50 color: #000000; 51 text-align: right; 52 font-family: ‘Open Sans Condensed‘; 53 } 54 /*控制按钮区域*/ 55 .slider .ctrl{ 56 width: 100%; 57 height: 13px; 58 line-height: 13px; 59 text-align: center; 60 position: absolute; 61 left: 0; 62 bottom: -13px; 63 } 64 65 .slider .ctrl .ctrl-i{ 66 display: inline-block; 67 width: 150px; 68 height: 13px; 69 background-color: #666; 70 box-shadow: 0 1px 1px rgba(0,0,0,.3); 71 position: relative; 72 margin-left: 1px; 73 } 74 .slider .ctrl .ctrl-i img{ 75 width: 100%; 76 position: absolute; 77 left: 0; 78 bottom: 50px; 79 z-index: 1; 80 /*透明度*/ 81 opacity:0; 82 /*渐变动画*/ 83 -webkit-transition:all .4s; 84 } 85 86 /*hover 到控制按钮的样式*/ 87 .slider .ctrl .ctrl-i:hover{ 88 background-color: #F0F0F0; 89 } 90 .slider .ctrl .ctrl-i:hover img{ 91 bottom: 13px; 92 -webkit-box-reflect:below 0px -webkit-gradient( 93 linear, 94 left top, 95 left bottom, 96 from(transparent), 97 color-stop(50%,transparent), 98 to(rgba(255,255,255,.3)) 99 ); 100 opacity:1; 101 } 102 103 /*active 当前展现的状态*/ 104 .slider .ctrl .ctrl-i_active:hover, 105 .slider .ctrl .ctrl-i_active{ 106 background-color: #000; 107 } 108 .slider .ctrl .ctrl-i_active:hover img{ 109 opacity:0; 110 } 111 112 /*幻灯片切换的样式*/ 113 .slider .main .main-i{ 114 opacity: 0; 115 position: absolute; 116 right:50%; 117 top: 0; 118 -webkit-transition:all .5s; 119 } 120 .slider .main .main-i h2{ 121 margin-right: 45px; 122 } 123 .slider .main .main-i h3{ 124 margin-right: -45px; 125 } 126 .slider .main .main-i h2, 127 .slider .main .main-i h3{ 128 -webkit-transition:all .8s 1s; 129 } 130 131 .slider .main .main-i_active{ 132 opacity: 1; 133 right: 0; 134 } 135 .slider .main .main-i_active h2, 136 .slider .main .main-i_active h3{ 137 margin-right: 0px; 138 } 139 </style> 140 </head> 141 <body> 142 <div class="slider"> 143 <!-- 0.修改 VIEW->Template(关键字替换)，增加template id--> 144 <div class="main" id="template_main"> 145 <div class="main-i " id="main_{{index}}" > 146 <div class="caption"> 147 <h2>{{h2}}</h2> 148 <h3>{{h3}}</h3> 149 </div> 150 <img src="images/{{index}}.jpg" /> 151 </div> 152 </div> 153 <div class="ctrl" id="template_ctrl"> 154 <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"><img src="images/{{index}}.jpg" /></a> 155 </div> 156 <script type="text/javascript"> 157 158 //1.数据定义（实际生产环境中，应有后台给出） 159 var data = [ 160 {img:1,h1:‘Creative‘,h2:‘DUET‘}, 161 {img:2,h1:‘Friendly‘,h2:‘DEVIL‘}, 162 {img:3,h1:‘Tranquilent‘,h2:‘COMPATRIOT‘}, 163 {img:4,h1:‘Insecure‘,h2:‘HUSSLER‘}, 164 {img:5,h1:‘Loving‘,h2:‘REBEL‘}, 165 {img:6,h1:‘Passionate‘,h2:‘SEEKER‘}, 166 {img:7,h1:‘Crazy‘,h2:‘FRIEND‘} 167 ]; 168 169 //2.通用函数 170 var g = function(id){ 171 if(id.substr(0,1) == "."){ 172 return document.getElementsByClassName(id.substr(1)); 173 } 174 return document.getElementById(id); 175 } 176 177 //3.添加所有幻灯片&对应按钮 178 function addSliders(){ 179 //3.1获取模板 180 var tpl_main= g(‘template_main‘).innerHTML 181 .replace(/^\s*/,‘‘) 182 .replace(/\s*$/,‘‘); 183 var tpl_ctrl= g(‘template_ctrl‘).innerHTML 184 .replace(/^\s*/,‘‘) 185 .replace(/\s*$/,‘‘); 186 //3.2定义最终输出 html的变量 187 var out_main = []; //所有幻灯片变量 188 var out_ctrl = []; //所有控制按钮变量 189 //3.3遍历所有数据，构建最终输出的 HTML 190 for(i in data){ 191 var _html_main = tpl_main 192 .replace(/{{index}}/g,data[i].img) 193 .replace(/{{h2}}/g,data[i].h1) 194 .replace(/{{h3}}/g,data[i].h2) 195 .replace(/{{css}}/g,[‘‘,‘main-i_right‘][i%2]); 196 var _html_ctrl = tpl_ctrl 197 .replace(/{{index}}/g,data[i].img); 198 out_main.push(_html_main); 199 out_ctrl.push(_html_ctrl); 200 } 201 //3.4吧HTML回写到对应的DOM里面 202 g(‘template_main‘).innerHTML = out_main.join(‘‘); 203 g(‘template_ctrl‘).innerHTML = out_ctrl.join(‘‘); 204 205 //7.增加 #main_background,以免出现空白背景 206 g(‘template_main‘).innerHTML += tpl_main 207 .replace(/{{index}}/g,‘{{index}}‘); 208 g(‘main_{{index}}‘).id = ‘main_background‘; 209 } 210 211 //5.幻灯片切换 212 function switchSlider(n){ 213 //5.1获得要展现的幻丁片&控制按钮 DOM 214 var main = g(‘main_‘+n); 215 var ctrl = g(‘ctrl_‘+n); 216 //5.2获得所有幻灯片以及控制按钮 217 var clear_main = g(‘.main-i‘); 218 var clear_ctrl = g(‘.ctrl-i‘); 219 //5.3清除他们的active样式 220 for(i=0;i<clear_ctrl.length;i++){ 221 clear_main[i].className = clear_main[i].className.replace(‘main-i_active‘,‘‘); 222 clear_ctrl[i].className = clear_ctrl[i].className.replace(‘ctrl-i_active‘,‘‘); 223 } 224 for(i=0;i<clear_ctrl.length; i++ ){ //标准的遍历语法，真正意义上的数组对象可以用 for in循环。 225 clear_main[i].className = clear_main[i].className 226 .replace(‘ main-i_active‘,‘‘); 227 clear_ctrl[i].className = clear_ctrl[i].className 228 .replace(‘ ctrl-i_active‘,‘‘); 229 } 230 //5.4为当前控制按钮和图片加样式 231 main.className += ‘ main-i_active‘; 232 ctrl.className += ‘ ctrl-i_active‘; 233 //7.2切换时复制上一张幻灯片到 main_background 中 234 setTimeout(function(){ 235 g(‘main_background‘).innerHTML = main.innerHTML; 236 },1000) 237 } 238 //6.动态调整图片的 margin-top ,使其垂直居中 239 function movePictures(){ 240 var pictures = g(‘.picture‘); 241 for(i=0; i<pictures.length; i++){ 242 pictures[i].style.marginTop = (-1 * pictures[i].clientHeight/2) + ‘px‘; 243 } 244 } 245 //4.定义何时处理幻灯片输出 246 window.onload = function(){ 247 addSliders(); 248 switchSlider(2); 249 setTimeout(function(){ 250 movePictures(); 251 },100); 252 } 253 </script> 254 255 </div> 256 </body> 257 </html>
以上是关于JS+CSS3实现带预览图幻灯片效果的主要内容，如果未能解决你的问题，请参考以下文章