<script type="text/javascript">

? ? ? ? //1. 數(shù)據(jù)定義（實際生產(chǎn)環(huán)境中，應由后臺給出）

? ? ? ? var data = [

? ? ? ? {img:1,h2:'MON',h3:'Monday'},

? ? ? ? {img:2,h2:'TUE',h3:'Tuesday'},

? ? ? ? {img:3,h2:'WED',h3:'Wednesday'},

? ? ? ? {img:4,h2:'THU',h3:'Thursday'},

? ? ? ? {img:5,h2:'FRI',h3:'Friday'},

? ? ? ? {img:6,h2:'SAT',h3:'Saturday'},

? ? ? ? {img:7,h2:'SUN',h3:'Sunday'}

? ? ? ? ];

? ? ? ? //2. 通用函數(shù)

? ? ? ? var g = function (id){

? ? ? ? if(id.substr(0,1)=='.'){

? ? ? ? return document.getElementsByClassName(id.substr(1));

? ? ? ? }

? ? ? ? return document.getElementById(id);

? ? ? ? }

? ? ? ? //3. 添加幻燈片的操作（所有幻燈片&對應的按鈕）

? ? ? ? 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( var i in data ){

? ? ? ? // 定義臨時的幻燈片數(shù)據(jù)

? ? ? ? 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 回寫到對應的 DOM 里面

? ? ? ? g('template_main').innerHTML = out_main.join('');

? ? ? ? g('template_ctrl').innerHTML = out_ctrl.join('');

? ? ? ? }

? ? ? ? //4. 定義何時處理幻燈片輸出

? ? ? ? window.onload = function(){

? ? ? ? addSliders();

? ? ? ? }

? ? ? ? </script>