<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.通用函数
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*$/,"");//清除获取内容前后的空格
var tpl_ctrl=g("template_ctrl").innerHTML.replace(/^\s*/,"").replace(/\s*$/,"");
//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("");
}//数组才允许for in操作
}
//4.定义何时处理幻灯片输出
window.onload=function(){
addSliders();
switchSlider();
}
//5.幻灯片切换
function switchSlider(n){
//5.1获得要展现的幻灯片及控制按钮
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为当前的幻灯片及按钮添加样式
main.className+="main-i_active";
ctrl.className+="ctrl-i_active";
}
</script>
</body>
