<body>
????<div?class="slider">
???????<!--0.模板生成-->
????????<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="images/{{index}}.jpg"?/>
????????????</div>
????????</div>
????????<div?class="ctrl"?id="template_ctrl">
????????????<a?class="ctrl-i"?id="ctrl_{{index}}"?href="javascript:switchSlider({{index}});"><img?src="images/{{index}}.jpg"?/></a>
????????</div>
????</div>
????<script?type="text/javascript">
????????//1.
????????var?data=[
????????????{img:1,h1:"Creative",h2:"DUET"},
????????????{img:2,h1:"Friendly",h2:"DEVIL"},
????????????{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.通用函數(shù)
????????var?g=function(id){
????????????if(id.substring(0,1)=="."){
????????????????return?document.getElementsByClassName(id.substring(1));
????????????}
????????????return?document.getElementById(id);
????????}
????????//3.添加幻燈片的操作（所有的幻燈片&控制按鈕）
????????function?addSliders(){
????????????//3.1獲取模板
????????????var?tpl_main=g("template_main").innerHTML.replace(/^\s*/,"").replace(/\s*$/,"");//清除獲取內(nèi)容前后的空格
????????????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].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("");
????????????}//數(shù)組才允許for?in操作
????????}
????????//4.定義何時(shí)處理幻燈片輸出
????????window.onload=function(){
????????????addSliders();
????????????switchSlider();
????????}
????????//5.幻燈片切換
????????function?switchSlider(n){
????????????//5.1獲得要展現(xiàn)的幻燈片及控制按鈕
????????????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(var?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";
????????}
????</script>
</body>
2016-04-18
很想知道你的那個(gè)?cannot read property of null怎么解決的
2016-02-28
你獲取了一段dom 那么這段dom是包含了這段結(jié)構(gòu)完整的內(nèi)容 。 賦值給變量后 當(dāng)然還能對(duì)變量中含有的class進(jìn)行編輯了。
這是我個(gè)人的認(rèn)識(shí) ， 如有不對(duì)請(qǐng)指出。