求問 那里出錯了？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋轉(zhuǎn)木馬</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. 數(shù)據(jù)定義（實際由后臺給到）
? ? ? 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. 通用函數(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(){
? ? ? ?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=[];
? ? //遍歷所有數(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);
? ? ? ? ? }
? ? ? ? ? //把html回寫進(jìn)對應(yīng)的 DOM里面
? ? ? ? ? g('template_main').innerHTML=out_main.join('');
? ? ? ? ? g('template_ctrl').innerHTML=out_ctrl.join('');
? ? ? }
? ? ? // 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 (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';
? ? ? }
? ? ?window.onload=function(){
? ? ? addSliders();
? ? ? switchSlider(2);
? ? ?}
?
</script>
</body>
</html>
2015-08-15
還是得靠自己啊 單詞寫錯的后果很嚴(yán)重