【DEMO】CSS+JS實現帶預覽縮略圖幻燈片

大二暑假某天頓悟要走的前端之路，於是在網上搜羅了一籮筐的前端入門攻略，總結出JS作為重中之重，抱着系統學習、想象能學成個人技能的心態就一句句代碼跟着書上碼的方式真看完《Javascript DOM編程藝術》《高級程序設計JvaScript》《鋒利的jQuery》三本比較大熱的JS的書，就是剛看完書的那段時間忙着期末考和實訓，也未來得及好好梳理並實踐。今天想來，也不覺得大三上整整一學期泡在圖書館的時候有多難熬，畢竟那時候生活屬於一片混亂鬧心，學無所成倒不至於，就是未能在那時將其實踐更好地掌握住有點可惜，只能退而其次想那段時間真培養了在大學的自學能力和對代碼的親和度吧...這學期就打算建個個人博客，存放住一些實踐項目，十一月份畢業設計完能夠回深圳找到一份好實習繼續深造。

利用CSS樣式和純生的JS小插件開發現在在各大網站中都比較常見的縮略圖預覽幻燈片

一、開發方法

VCD開發方式

• VIEW:視覺
• CONTROLLER:控制
• DATA:數據

最先，做VIEW -頁面結構分析

接着，先做 DATA-數據分析

 

最后，再做 CONTROLLER-功能和行為的分析

二、界面開發

1、先對界面做一個簡單的初始化

                   * { margin: 0; padding: 0; }
                   
                   body{
                       padding: 50px 0;
                       background-color: #fff;
                       font-size: 14px;
                       color: #555;
                       -webkit-font-smothing: antialiased;
                   }

2、根據VIEW結構寫出完整的HTML

          <div class="slider">
          //幻燈片區域
                     <div class="main">
                                //每個幻燈片區域
                         <div class="main-i">
                                 <div class="caption">
                                     <h2>h2 caption</h2>
                                     <h3>h3 caption</h3>
                                 </div>
                                 <img src="img/{{index}}.jpg" alt=" ">
                         </div>
                     </div>
                     //控制按鈕區域
                     <div class="ctrl">
                         <a href="javascript:;" class="ctrl-i"><img src="img/{{index}}.jpg" alt=" "></a>
                     </div>
          </div>

3、編寫簡單的樣式

.slider .main,
.main-i,
.slider {     
      width: 100%;
      height: 400px;
      position: relative;      
       }
/* 幻燈片區域樣式 */
.main{  
      overflow: hidden;
       }
.main .main-i img{ 
      width: 100%;
      position: absolute;
      left: 0;
      top: 50%;
      z-index: 1;
       }
.caption{  
       position: absolute;
       right: 50%;
       top: 30%;
       z-index: 9;
       }
.caption h2{
       font-size: 40px;
       line-height: 50px;
       color: #b5b5b5;
       text-align: right;
       }
.caption h3{
       font-size: 70px;
       line-height: 70px;
       color: #000;
       text-align: right;
       font-family: "Open Sans Condensed";
       }
/* 控制按鈕區域 */

.slider .ctrl{ 
         width: 100%;
         height: 13px;
         line-height: 13px;
         left: 0;
         bottom: -13px;
         text-align: center;
         background-color:#fff;
      }

/* 每一個控制按鈕的樣式 */
.ctrl .ctrl-i{  
            display: inline-block;
            width: 150px;
            height: 13px;
            background-color: #666;
            box-shadow: 0px 1px 1px rgba(0,0,0,.3);
            position: relative;
            margin-left: 1px;
                   }
.ctrl .ctrl-i img{
            width: 100%;
            position:absolute;
            left: 0;
            bottom: 50px;
            z-index: 3;
            -webkit-transition: all .2s;
            opacity: 0;
                   }

/* 按鈕hover樣式 */
.ctrl .ctrl-i:hover{
             background-color: #f0f0f0;
           }

/* 圖像hover和縮略圖倒影 */
.ctrl .ctrl-i:hover img{
             bottom: 13px;
        -webkit-box-reflect:below 0px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from( transparent ),
            color-stop( 50%, transparent ),
            to( rgba(255,255,255,.3) )
            );
             opacity: 1;
                   }

/* 按鈕和圖像的的active樣式 */
.ctrl .ctrl-i_active,
.ctrl .ctrl-i_active:hover{
               background-color: #000;
            }
.ctrl .ctrl-i_active:hover img{
                opacity: 0;
             }
/* 幻燈片切換樣式 */
.main .main-i{
                opacity: 0;
                position: absolute;
                right: 50%;
                top: 0;
                -webkit-transition:all .5s;
         }
/* 原來文字的樣式，兩行文字不對齊 */
.main .main-i h2{
                margin-right: 45px;
         }
.main .main-i h3{
                margin-right: -45px;
         }
/* 為幻燈片切換時的文字添加過渡效果 */
.main .main-i h2,
.main .main-i h3{
               opacity: 0;
             -webkit-transition:all  1s .8s;
         }
.main .main-i_active {
              right: 0;
              opacity: 1;
         }
/* 幻燈片切換完成后的文字效果 */
.main .main-i_active h2,
.main .main-i_active h3{
             opacity: 1;
             margin-right: 0px;

         }
.main .main-i .caption{
             margin-right: 13%;
         }

 三、腳本開發

<script type="text/script>

 1、數據的定義，在實際生產的環境中是直接由后台給出

            var data =[
                       { img:1, h1:'Creative', h2:'DUET'},
                       { img:2, h1:'Friendly', h2:'DEVTL'},
                       { img:3, h1:'Tranquilent', h2:'COMPATRIOT'},
                       { img:4, h1:'Insecure', h2:'HUSSLER'},
                       { img:5, h1:'Loving', h2:'REBEL'},
                       { img:6, h1:'Passionate', h2:'SEEKER'},
                       { img:7, h1:'Crazy', h2:'FRIEND'}
                              ];

最先，分析腳本功能開發

2、修改VIEW,生成Template，增加Template id

          <div class="slider">

                     <div class="main" id="template_main">
                         <div class="main-i" id="main_{{index}}">
                                 <div class="caption">
                                     <h2>{{h2}}</h2>
                                     <h3>{{h3}}</h3>
                                 </div>
                                 <img src="img/{{index}}.jpg" alt=" ">
                         </div>
                     </div>

                     <div class="ctrl" id="template_ctrl">
                         <a href="javascript:switchSlider({{index}});" class="ctrl-i" id="ctrl_{{index}}"><img src="img/{{index}}.jpg" alt=" "></a>
                     </div>

3、生成通用函數，以來獲取DOM元素

var g = function(id){
                    if( id.substr(0,1) == ' . '){
                       return document.getElementsByClassName(id.substr(1));
                      }
                    return document.getElementById(id);
                               }

4、添加幻燈片的操作（所有的幻燈片&&對應的按鈕)

function addSliders(n){
            //3.1獲取模板
                   var tpl_main = g('template_main').innerHTML.replace(/^\s*/,' ')
                                                              .replace(/\s*$/,' ');
                   var tpl_ctrl = g('template_ctrl').innerHTML.replace(/^\s*/,' ')
                                                              .replace(/\s*$/,' ');
                       //利用正則表達式(/^\s*/,' ')、(/\s*$/,' ')清除DOM元素里的首尾空格

            //3.2定義最終輸出的HTML的變量
                    var out_main = [ ];
                    var out_ctrl = [ ];
            //3.3遍歷所有數據，構建最終輸出的HTML

            for( i in data ){
                    var _html_main = tpl_main.replace(/{{index}}/g, data[i].img)
                                              .replace(/{{h2}}/g, data[i].h1)
                                              .replace(/{{h3}}/g, data[i].h2);

                    var _html_ctrl = tpl_ctrl.replace(/{{index}}/g, data[i].img);

                        out_main.push(_html_main);
                        out_ctrl.push(_html_ctrl);

                }
            //3.4把HTML回寫到DOM元素里面
                            g('template_main').innerHTML = out_main.join(' ');
                            g('template_ctrl').innerHTML = out_ctrl.join(' ');
                               }

6、幻燈片切換操作

•              function switchSlider(n){
              //6.1獲得將要展現的幻燈片的DOM元素
                      var main = g('main_'+n);
                      var ctrl = g('ctrl_'+n);
              //6.2獲得所有幻燈片&&對應的控制按鈕
                      var clear_main = g('.main-i');  //注意！！.main-i前面無空格
                      var clear_ctrl = g('.ctrl-i');
              //6.3清除它們的active樣式
                      for( i=0;i<clear_ctrl.length;i++){
                          clear_main[i].className = clear_main[i].className.replace(' main-i_active',' ');
                          clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl-i_active',' ');
  
                      } 
              //6.3添加當前按鈕和幻燈片的附件樣式
                     main.className += ' main-i_active';
                     ctrl.className += ' ctrl-i_active';
  
                                 }

7、調整圖片的高度

function movePictures(){
                  var pictures = g('.picture');
                  for( i=0;i<pictures.length;i++){
                  pictures[i].style.marginTop = ( -1 * pictures[i].clientHeight/2) + 'px';
                   }

                            }

優化，思路如圖

8、增加一個#main_background背景圖片

//為#main_background背景圖片添加樣式，該背景圖片的z-index比 .main-i_active低
#main_background,
.main .main-i_active {
            right: 0;
            opacity: 1;
            z-index: 2;
}
#main_background{
           z-index: 1
         }//在addSliders()函數里增加該腳本

 g('template_main').innerHTML += tpl_main.replace(/{{index}}/g, '{{index}}') .replace(/{{h2}}/g, data[i].h1) .replace(/{{h3}}/g, data[i].h2); g('main_{{index}}').id = 'main_background'; //在switchSlider()中操作，切換時，復制上一張幻燈片到#main_background

//需要設置setTimeout，才能使背景圖晚出現
setTimeout(function(){ g('main_background').innerHTML = main.innerHTML; },1000);

擴展

//在構建最終的HTML模板時，隨機增加一個main-i_right的樣式       
for( i in data ){
             var _html_main = tpl_main.replace(/{{index}}/g, data[i].img)
                                      .replace(/{{h2}}/g, data[i].h1)
                                      .replace(/{{h3}}/g, data[i].h2)
                                      .replace(/{{css}}/g,[' ','main-i_rigth'][i%2]);   

/*為main-i_right增加樣式，使其傳入時的方向不同*/
.main .main-i_right{
            right: 50%;
}

5、幻燈片要在DOM加載完成后操作

window.onload=function(){
                addSliders();
                switchSlider(2); setTimeout(function(){ movePictures() },100); } 

</script>

四、案例總結

•  CSS方面

//設置元素opacity、right樣式的過渡動畫
-webkit-transition: -webkit_transition:all 1s .8s;
//設置元素支持倒影，只有webkit內核支持
-webkit-box-reflect:below 0px -webkit-gradient(
                              linear, 
                              left top,//其實位置
                              left bottom,//結束為止
                              from(transparent),
                              colorstop(50%,transparent),
                              to(rgba(255,255,255,.3))
 //在Firebox中，我們使用
              #id{background:-moz-element(#id) no-repeat;}代替

• Javascript方面

//字符串的替換，.replace可以聯系使用
              tpl_main.replace(/{{index}}/g,i).replace(/{{css}}/,...)
//在100毫秒后，執行第一個參數內的函數
              setTimeout(function(){movePictures()},100)

源代碼:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Preview Slideshow1</title>
    <style type="text/css">
                   * { margin: 0; padding: 0; }
                       body{
                           padding: 50px 0;
                           background-color: #fff;
                           font-size: 14px;
                           color: #555;
                           -webkit-font-smothing: antialiased;
                       }

         .slider .main,
         .main-i,
         .slider {     
                           width: 100%;
                           height: 400px;
                           position: relative;      
       }
                         /* 幻燈片區域樣式 */
                   .main{  
                       overflow: hidden;
                   }

                   .main .main-i img{ 
                       width: 100%;
                       position: absolute;
                       left: 0;
                       top: 50%;
                       z-index: 1;
                   }
                   .caption{  
                           position: absolute;
                           right: 50%;
                           top: 30%;
                           z-index: 9;
                   }
                   .caption h2{
                       font-size: 40px;
                       line-height: 50px;
                       color: #b5b5b5;
                       text-align: right;
                   }
                   .caption h3{
                       font-size: 70px;
                       line-height: 70px;
                       color: #000;
                       text-align: right;
                       font-family: "Open Sans Condensed";
                   }
                   /* 控制按鈕區域 */
                   .slider .ctrl{ 
                       width: 100%;
                       height: 13px;
                       line-height: 13px;
                       left: 0;
                       bottom: -13px;
                       text-align: center;
                       background-color:#fff;
                   }
                   /* 每一個控制按鈕的樣式 */
                   .ctrl .ctrl-i{  
                       display: inline-block;
                       width: 150px;
                       height: 13px;
                       background-color: #666;
            box-shadow: 0px 1px 1px rgba(0,0,0,.3);
            position: relative;
            margin-left: 1px;
                   }
                   .ctrl .ctrl-i img{
                       width: 100%;
                       position:absolute;
                       left: 0;
                       bottom: 50px;
                       z-index: 3;
                       -webkit-transition: all .2s;
                       opacity: 0;
                   }
                      /* 按鈕hover樣式 */
                   .ctrl .ctrl-i:hover{
                       background-color: #f0f0f0;
                   }
                   /* 圖像hover和縮略圖倒影 */
                   .ctrl .ctrl-i:hover img{
                       bottom: 13px;
        -webkit-box-reflect:below 0px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from( transparent ),
            color-stop( 50%, transparent ),
            to( rgba(255,255,255,.3) )
            );
                       opacity:1;
                   }

                        /* 按鈕和圖像的的active樣式 */
                        .ctrl .ctrl-i_active,
                        .ctrl .ctrl-i_active:hover{
                                background-color: #000;
                        }
                        .ctrl .ctrl-i_active:hover img{
                            opacity: 0;
                        }
               /* 幻燈片切換樣式 */
                .main .main-i{
                             opacity: 0;
                             position: absolute;
                             right: 50%;
                             top: 0;
                              -webkit-transition:all .5s;
                              z-index: 2;
              }

              /*為main-i_right增加樣式，使其傳入的方向不同*/
                             .main .main-i_right{
                               right: 50%;
                          }
                 /* 原來文字的樣式，兩行文字不對齊 */
         .main .main-i h2{
                            margin-right: 45px;
         }
         .main .main-i h3{
                           margin-right: -45px;
         }
                 /* 為幻燈片切換時的文字添加過渡效果 */
         .main .main-i h2,
         .main .main-i h3{
            opacity: 0;
                           -webkit-transition:all  1s .8s;
         }
         #main_background,
         .main .main-i_active {
            right: 0;
                              opacity: 1;
                              z-index: 2;
         }
         #main_background{
                                z-index: 1
         }
         /* 幻燈片切換完成后的文字效果 */
         .main .main-i_active h2,
         .main .main-i_active h3{
            opacity: 1;
            margin-right: 0px;

         }
         .main .main-i .caption{
            margin-right: 13%;
         }
                  /*為main-i_right增加樣式，使其傳入背景時的方向不同*/


    </style>
</head>
<body>
          <div class="slider">

                     <div class="main" id="template_main">
                         <div class="main-i {{css}}" id="main_{{index}}">
                                 <div class="caption">
                                     <h2>{{h2}}</h2>
                                     <h3>{{h3}}</h3>
                                 </div>
                                 <img src="img/{{index}}.jpg" class="picture" alt=" ">
                         </div>
                     </div>

                     <div class="ctrl" id="template_ctrl">
                         <a href="javascript:javascript:switchSlider({{index}});" class="ctrl-i" id="ctrl_{{index}}"><img src="img/{{index}}.jpg" alt=" "></a>
                     </div>
                     <script type="text/javascript">
                         // 1、數據的定義，在實際生產的環境中是直接由后台給出
                              var data =[
                                                { img:1, h1:'Creative', h2:'DUET'},
                                                { img:2, h1:'Friendly', h2:'DEVTL'},
                                                { img:3, h1:'Tranquilent', h2:'COMPATRIOT'},
                                                { img:4, h1:'Insecure', h2:'HUSSLER'},
                                                { img:5, h1:'Loving', h2:'REBEL'},
                                                { img:6, h1:'Passionate', h2:'SEEKER'},
                                                { img:7, h1:'Crazy', h2:'FRIEND'}
                              ];
                     //2.通用函數,獲取DOM元素
                               var g = function(id){
                                     if( id.substr(0,1) == '.'){ 
                                         return document.getElementsByClassName(id.substr(1));
                                     }
                                     return document.getElementById(id);
                               }
                    
                    //3.添加幻燈片的操作（所有的幻燈片&&對應的按鈕）
                               function addSliders(n){
                                       //3.1獲取模板
                                       var tpl_main = g('template_main').innerHTML.replace(/^\s*/,' ')
                                                              .replace(/\s*$/,' ');
                                       var tpl_ctrl    = g('template_ctrl').innerHTML.replace(/^\s*/,' ')
                                                              .replace(/\s*$/,' ');
                                       //利用正則表達式(/^\s*/,' ')、(/\s*$/,' ')清除DOM元素里的首尾空格

            //3.2定義最終輸出的HTML的變量
                                       var out_main = [ ];
                                       var out_ctrl = [ ];
            //3.3遍歷所有數據，構建最終輸出的HTML

            for( i in data ){
                                           var _html_main = tpl_main.replace(/{{index}}/g, data[i].img)
                                                                                    .replace(/{{h2}}/g, data[i].h1)
                                                                                    .replace(/{{h3}}/g, data[i].h2)
                                                                                    .replace(/{{css}}/g,[' ','main-i_rigth'][i%2]);
                                                                               //在構建最終的HTML模板時，隨機增加一個main-i_right的樣式
                                            var _html_ctrl = tpl_ctrl.replace(/{{index}}/g, data[i].img);

                                           out_main.push(_html_main);
                                           out_ctrl.push(_html_ctrl);

                }
            //3.4把HTML回寫到DOM元素里面
                                            g('template_main').innerHTML = out_main.join(' ');
                                            g('template_ctrl').innerHTML = out_ctrl.join(' ');
                                
                                //8、增加#main_background
                                           g('template_main').innerHTML += tpl_main.replace(/{{index}}/g, '{{index}}')
                                                                                    .replace(/{{h2}}/g, data[i].h1)
                                                                                    .replace(/{{h3}}/g, data[i].h2);

                                            g('main_{{index}}').id = 'main_background';
                               }

                              // 6、幻燈片切換操作
                               function switchSlider(n){
            //6.1獲得將要展現的幻燈片的DOM元素
                                              var main = g('main_'+n);
                                              var ctrl = g('ctrl_'+n);
            //6.2獲得所有幻燈片&&對應的控制按鈕
                                              var clear_main = g('.main-i');  //注意！！.main-i前面無空格
                                              var clear_ctrl = g('.ctrl-i');
            //6.3清除它們的active樣式
                    for( i=0;i<clear_ctrl.length;i++){
                        clear_main[i].className = clear_main[i].className.replace(' main-i_active',' ');
                        clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl-i_active',' ');

                    } 
            //6.3添加當前按鈕和幻燈片的附件樣式
                   main.className += ' main-i_active';
                   ctrl.className += ' ctrl-i_active';
            //8.1切換時，復制上一張幻燈片到#main_background中
                    //需要設置setTimeout，才能使背景圖晚出現
            setTimeout(function(){
                                       g('main_background').innerHTML = main.innerHTML;
            },1000);

                               }

                            //7、動態調整圖片的margin-top，使圖片垂直居中
                                function movePictures(){
                                       var pictures = g('.picture');
                                       for( i=0;i<pictures.length;i++){
                                           pictures[i].style.marginTop = ( -1 * pictures[i].clientHeight/2) + 'px';
                                       }

                                }

                            //5、幻燈片要在DOM加載完成后操作

                               window.onload=function(){
                                       addSliders();
                                       switchSlider(2);
                                       setTimeout(function(){
                                           movePictures()
                                       },100);
                               }
                              

                     </script>
          </div>
    
</body>
</html>