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>

 

posted @ 2016-09-23 12:20  老板丶鱼丸粗面  阅读(1041)  评论(0)  编辑  收藏  举报