首页 > 代码库 > JS+CSS3实现带预览图幻灯片效果

JS+CSS3实现带预览图幻灯片效果

2024-08-14 10:29:52   218人阅读

 这个案例学习起来还有点吃力，目前还没有独自自己写出来过，贴出来以免忘记。

慕课网该课程原地址：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="http://www.mamicode.com/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="http://www.mamicode.com/images/{{index}}.jpg" /></a>155         </div>156     <script type="text/javascript">157 158         //1.数据定义（实际生产环境中，应有后台给出）159         var data =http://www.mamicode.com/ [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‘).innerHTML181                              .replace(/^\s*/,‘‘)182                             .replace(/\s*$/,‘‘);183             var tpl_ctrl= g(‘template_ctrl‘).innerHTML184                              .replace(/^\s*/,‘‘)185                             .replace(/\s*$/,‘‘);186             //3.2定义最终输出 html的变量187             var out_main = []; //所有幻灯片变量188             var out_ctrl = []; //所有控制按钮变量189             //3.3遍历所有数据，构建最终输出的 HTML190             for(i in data){191                 var _html_main = tpl_main192                         .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_ctrl197                         .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_main207                         .replace(/{{index}}/g,‘{{index}}‘);208         g(‘main_{{index}}‘).id = ‘main_background‘;209         }210 211         //5.幻灯片切换212         function switchSlider(n){213             //5.1获得要展现的幻丁片&控制按钮 DOM214             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].className226                                     .replace(‘ main-i_active‘,‘‘);227                  clear_ctrl[i].className = clear_ctrl[i].className228                                     .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实现带预览图幻灯片效果


联系
我们