CSS源碼：

@charset?"utf-8";

/*?幻燈片顯示區(qū)域?*/
#SliderArea?{
????height:?600px;
????width:?70%;
????position:?relative;
????margin:?10px?5px;
????float:?left;
}
/*?幻燈片主體區(qū)域?*/
#SliderArea?.Main?{
????height:?100%;
????width:?100%;
????position:?relative;
????overflow:?hidden;
}
/*?每一個幻燈片的樣式?*/
#SliderArea?.Main?.main-i?{
????height:?100%;
????width:?100%;
????position:?relative;
}
#SliderArea?.Main?.main-i?img?{
????width:?100%;
????position:?absolute;
????left:?0;
????top:?0;
}
#SliderArea?.Main?.main-i?.caption?{
????width:?100%;
????height:?100%;
????position:?absolute;
????right:?54%;
????top:?60%;
}
#SliderArea?.Main?.main-i?.caption?h2{
????background-color:?rgba(245,?51,?23,?0.82);
????font-size:?30px;
????line-height:?50px;
????color:?#ffffff;
????text-align:?right;
????padding:?0px?5px;

????border-radius:?22px;
????-ms-border-radius:?22px;
????-moz-border-radius:?22px;
????-webkit-border-radius:?22px;
????-o-border-radius:?22px;
}
#SliderArea?.Main?.main-i?.caption?h3{
????background-color:?rgba(27,?27,?27,?0.75);
????font-family:?YouYuan;
????font-size:?70px;
????line-height:?70px;
????color:?#ffffff;
????text-align:?right;
????padding:?0px?5px;

????border-radius:?5px;
????-ms-border-radius:?5px;
????-moz-border-radius:?5px;
????-webkit-border-radius:?5px;
????-o-border-radius:?5px;
}
#SliderArea?.Main?.main-i?{
????opacity:?0;
????position:?absolute;
????right:?50%;
????top:?0;
????-webkit-transition:?all?.5s;
}
#SliderArea?.Main?.main-i?h2?{
????margin-right:?45px;
}
#SliderArea?.Main?.main-i?h3?{
????margin-right:?-45px;
}
#SliderArea?.Main?.main-i?h2,
#SliderArea?.Main?.main-i?h3?{
????opacity:?0;
????-webkit-transition:?all?.8s?1s;
}
#SliderArea?.Main?.main-i_active?{
????opacity:?1;
????right:?0;
}
#SliderArea?.Main?.main-i_active?h2,
#SliderArea?.Main?.main-i_active?h3?{
????margin-right:?0;
????opacity:?1;
}

/*?幻燈片控制按鈕區(qū)域?*/
#SliderArea?.Ctrl?{
????height:?15px;
????width:?100%;
????line-height:?15px;
????text-align:?center;
????position:?absolute;
????left:?0;
????bottom:?-17px;
}
#SliderArea?.Ctrl?.ctrl-i?{
????display:?inline-block;
????height:?15px;
????width:?12%;
????background-color:?#a3a3a3;
????box-shadow:?rgba(0,0,0,.3)?0?1px?1px;
????position:?relative;
????margin-left:?1px;
}
#SliderArea?.Ctrl?.ctrl-i?img?{
????width:?100%;
????position:?absolute;
????left:?0;
????bottom:?50px;
????z-index:?1;
????opacity:?0;
????-webkit-transition:?all?.2s;
}
#SliderArea?.Ctrl?.ctrl-i:hover?{
????background-color:?#d1d1d1;
}
#SliderArea?.Ctrl?.ctrl-i:hover?img?{
????bottom:?17px;

????-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;
}
#SliderArea?.Ctrl?.ctrl-i_active:hover,
#SliderArea?.Ctrl?.ctrl-i_active?{
????background-color:?#000000;
}
#SliderArea?.Ctrl?.ctrl-i_active:hover?img?{
????opacity:?0;
}

JS源碼：

注：最后的優(yōu)化部分沒能做出來（垂直居中啦，不顯示白底了，從不同方向切換啦等）。歡迎有興趣的同學(xué)和我交流一下，交流請?jiān)L問：www.diagonal.cn。

//?1.?數(shù)據(jù)定義（實(shí)際生產(chǎn)環(huán)境中，應(yīng)由后臺給出）
var?data?=?[
????{?img:?1,?h2:?'Virtual?Interactive?System',?h3:?'V?I?S'?},
????{?img:?2,?h2:?'Computer?/?Network?/?Security',?h3:?'C?N?S'?},
????{?img:?3,?h2:?'Global?Positioning?System',?h3:?'G?P?S'?},
????{?img:?4,?h2:?'Super?Hacker',?h3:?'S?H'?},
????{?img:?5,?h2:?'Data?Protection',?h3:?'D?P'?},
????{?img:?6,?h2:?'Romote?Interconnection',?h3:?'R?I'?},
????{?img:?7,?h2:?'Mad?Network?Engineer',?h3:?'S?and?R'?},
????{?img:?8,?h2:?'Social?Network?Site',?h3:?'S?N?S'?}
];

//?2.?通用函數(shù)
var?g?=?function?(id)?{
????if?(id.substr(0,?1)?==?'.')?{
????????return?document.getElementsByClassName(id.substr(1));
????}
????return?document.getElementById(id);
}

//?3.?添加幻燈片的操作（所有幻燈片?和?對應(yīng)的按鈕）
function?addSliders()?{
????//?3.1?獲取模板
????var?tpl_main?=?g('template_main').innerHTML
????????????????????.replace(/^\s*/,?'')
????????????????????.replace(/\s*$/,?'');
????var?tpl_ctrl?=?g('template_ctrl').innerHTML
????????????????????.replace(/^\s*/,?'')
????????????????????.replace(/\s*$/,?'');
????//?3.2?定義最終輸出?HTML?的變量
????var?out_main?=?[];
????var?out_ctrl?=?[];
????//?3.3?遍歷所有數(shù)據(jù)，構(gòu)建最終輸出的?HTML
????for?(i?in?data)?{
????????var?_html_main?=?tpl_main
????????????????????.replace(/{{index}}/g,?data[i].img)
????????????????????.replace(/{{h2}}/g,?data[i].?h2)
????????????????????.replace(/{{h3}}/g,?data[i].?h3);
????????var?_html_ctrl?=?tpl_ctrl
????????????????????.replace(/{{index}}/g,?data[i].img);
????????out_main.push(_html_main);
????????out_ctrl.push(_html_ctrl);
????}
????//?3.4?把?HTML?回寫到對應(yīng)的?DOM?里面
????g('template_main').innerHTML?=?out_main.join('');
????g('template_ctrl').innerHTML?=?out_ctrl.join('');
}

//?4.?定義何時處理幻燈片輸出
window.onload?=?function?()?{
????addSliders();
????switchSlider(2);
}

//?5.?幻燈片切換
function?switchSlider(n)?{
????//?5.1?獲得要展現(xiàn)的幻燈片?和?控制按鈕?DOM
????var?main?=?g('main_'?+?n);
????var?ctrl?=?g('ctrl_'?+?n);
????//?5.2?獲得所有的幻燈片以及控制按鈕
????var?clear_main?=?g('.main-i');
????var?clear_ctrl?=?g('.ctrl-i');
????//?5.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',?'');
????}
????//?5.4?為當(dāng)前幻燈片和控制按鈕附加樣式
????main.className?+=?'main-i_active';
????ctrl.className?+=?'ctrl-i_active';
}

DIV源碼：

????<div?id="SliderArea">
????<!--?0.?修改?VIEW->TEMPLATE（關(guān)鍵字替換），增加?Template?ID?-->
????????<div?class="Main"?id="template_main">
????????????<div?class="main-i?main-i_active"?id="main_{{index}}">
????????????????<img?src="00_Images/{{index}}.jpg"?/>
????????????????<div?class="caption">
????????????????????<h2>{{h2}}</h2>
????????????????????<h3>{{h3}}</h3>
????????????????</div>
????????????</div>
????????</div>
????????<div?class="Ctrl"?id="template_ctrl">
????????????<a?class="ctrl-i?ctrl-i_active"?id="ctrl_{{index}}"?href="javascript:switchSlider({{index}});">
????????????????<img?src="00_Images/{{index}}.jpg"?/>
????????????</a>
????????</div>
????</div>