求问 那里出错了？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转木马</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="xuanzhuan.js"></script>
<style>
*{
margin:0;padding:0;
}
body{
padding: 50px 0;
background-color: #fff;
}
.slider .main .main-i,
.slider .main,
.slider{
width:100%;
height:400px;
position: relative;
}
.slider .main{overflow: hidden;}
.slider .main .main-i{}
.slider .main .main-i img{width: 100%;
position: absolute;left: 0;top:0;z-index: 1;
}
.slider .main .main-i .caption{
position: absolute;right:50%;top:30%;z-index: 9;}
.slider .main .main-i .caption h2{
font-size: 40px;
line-height: 50px;
color:#b5b5b5;
text-align: right:;
}
.slider .main .main-i .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;
text-align: center;
position: absolute;
left: 0;
bottom:-13px;
}
.slider .ctrl .ctrl-i{
display: inline-block;
width:150px;
height:13px;
background-color: #666;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
position: relative;
margin-left: 1px;
}
.slider .ctrl .ctrl-i img{
width: 100%;
position: absolute;
left: 0;
bottom:50px;
z-index: 1;
opacity: 0;
-webkit-transition:all .2s;
}
.slider .ctrl .ctrl-i:hover{
background-color: #f0f0f0;
}
.slider .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;
}
.slider .ctrl .ctrl-i_active:hover,
.slider .ctrl .ctrl-i_active{background-color: #000;}
.slider .ctrl .ctrl-i_active:hover img{opacity:0;}
.slider .main .main-i{
opacity: 0;
position: absolute;
right:50%;
top:0;
-webkit-transition:all .5s;
}
.slider .main .main-i h2{margin-right: 45px;}
.slider .main .main-i h3{margin-right: -45px;}
.slider .main .main-i h2,
.slider .main .main-i h3{
-webkit-transition:all .8s 1s;
}
.slider .main .main-i_active{
opacity: 1;
right:0;
}
.slider .main .main-i_active h2,
.slider .main .main-i_active h3{
margin-right: 0px;
}
</style>
</head>
<body>
<div>
<div id="template_main">
<div id="main_{{index}}">
<div>
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
<img src="img/{{index}}.jpg">
</div>
</div>
<div id="template_ctrl">
<a id="ctrl_{{index}}" href="javascripy:switchSlider({{index}});">
<img src="img/{{index}}.jpg">
</a>
</div>
</div>
<script type="text/javascript">
//1. 数据定义（实际由后台给到）
var data=[
{img:1,h1:'erew',h2:'fdsdsf'},
{img:2,h1:'sdfsd',h2:'dsfdsg'},
{img:3,h1:'dfsf',h2:'vxc'},
{img:4,h1:'zvdf',h2:'fg'},
{img:5,h1:'fgfu',h2:'jhgkjh'}
];
//2. 通用函数
var g=function(id){
if( id.substr(0,1)=='.'){
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
// 3.添加幻灯片的操作及对应的按钮
function addSliders(){
var tpl_main=g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
var tpl_ctrl=g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
// 定义输出的html 的变量
var out_main=[];
var out_ctrl=[];
//遍历所有数据，构建最终输出的 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);
}
//把html回写进对应的 DOM里面
g('template_main').innerHTML=out_main.join('');
g('template_ctrl').innerHTML=out_ctrl.join('');
}
// 5.幻灯片切换
function switchSlider(n){
//5.1 获得展现的幻灯片&控制按钮 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 (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';
}
window.onload=function(){
addSliders();
switchSlider(2);
}
</script>
</body>
</html>
