                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果

為啥幻燈片沒有顯示,求指教

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>slide_preview</title>
<style?type="text/css">
*{padding:?0;margin:?0;}

body{
padding:?50px?0;
background-color:?#fff;
font-size:14px;?
font-family:'Avenir?Next';
color:?#555;
-webkit-font-smoothing:antialiased;/*字體抗鋸齒*/
}

.slider,.slider?.main,.slider?.main?.main-i{
width:?100%;
height:?400px;
position:?relative;
}

/*幻燈片區(qū)域*/
.slider?.main{
overflow:?hidden;/*隱藏溢出*/
}

/*每一個(gè)幻燈片樣式*/
.slider?.main?.main-i{}
.slider?.main?.main-i?img{
width:?100%;
position:?absolute;
left:?0;
top:?50%;
/*z-index:?5;*/
}
.slider?.main?.main-i?.caption{
position:?absolute;
right:?50%;
top:?30%;
z-index:?9;/*控制疊加層次*/
}

.caption?h2{
font-size:?40px;
line-height:?50px;
color:?#b5b5b5;
text-align:?right;
}

.caption?h3{
font-size:?70px;
line-height:?70px;
color:?#000;
text-align:?right;
font-family:?'Open?Sans?Condensed';
}

/*控制按鈕區(qū)域*/
.slider?.ctrl{
width:?100%;
height:?13px;
line-height:?13px;
text-align:?center;
position:?absolute;
left:?0;
bottom:?-13px;
/*background:?#f00;*/
}

.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;

}

/*hover按鈕樣式*/
.slider?.ctrl?.ctrl-i:hover{
background-color:?#f0f0f0;
}

.slider?.ctrl?.ctrl-i:hover?img{
bottom:?13px;

opacity:?1;
/*倒影*/
-webkit-box-reflect:below?0px?-webkit-gradient(
linear,
left?top,
left?bottom,
from(transparent),
color-stop(?50%?,?transparent?),
to(?rgba(?255,255,255,0.3?)?)
);
/*-webkit-box-reflect:below?0px?-webkit-gradient(
linear,線形漸變
left?top,起始位置
left?bottom,結(jié)束位置
from(transparent),開始顏色
color-stop(?50%?,?transparent?),中間顏色
to(?rgba(?255,255,255,0.3?))結(jié)束顏色;
);*/
}

/*button?active*/
.slider?.ctrl?.ctrl-i_active:hover,.slider?.ctrl?.ctrl-i_active{
background:?#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?1s?.8s;
}
.slider?.main?.main-i_active{
opacity:?1;
right:?0;
}

.slider?.main?.main-i_active?h2,.slider?.main?.main-i_active?h3{
margin-right:?0;
opacity:?1;
/*-webkit-transition:all?.8s?1s;*/
}

.caption{
????margin-right:?13%;
}
</style>

</head>
<body>
<div>
<!--?修改VIEW?Template(關(guān)鍵字替換),增加?template?id?-->
<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="javascript:switchSlider({{index}});"?><img?src="img/{{index}}.jpg"?/></a>
</div>

<script?type="text/javascript">

//?1.?數(shù)據(jù)定義(實(shí)際環(huán)境中由后臺給出)
var?data?=?[
{img:1,h1:'Creative',h2:'DUTE'},
{img:2,h1:'Friendly',h2:'DEVIL'},
{img:3,h1:'Tranquilent',h2:'VOMPATRIOT'},
{img:4,h1:'Insecure',h2:'HUSSLER'},
{img:5,h1:'Loving',h2:'REBEL'}
];

//?2.?通用函數(shù)
var?g?=?function?(id)?{
if(?id.substr(0,1)?==?'.'){
return?document.getElementByClassName(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?(?i?in?data){
var?_html_main=tpl_main
????????.replace(/{{index}}/g,data[i].img)//g表示全局
????????.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回寫到對應(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(?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?添加active樣式
????????????????main.className?+=?'?main-i_active?';//修改類名,激活
????????????????ctrl.className?+=?'?ctrl-i_active?';
????????????}

?????????????6.動態(tài)調(diào)整圖片的?margin-top?使其垂直居中
???????function?movePictures(){
????????var?pictures?=?g('.picture');
????????for(i=0;i<pictures.length;i++){
????????pictures[i].style.marginTop?=?(-1?*?pictures[i].clientHeight/2)?+?'px'
????????????????}

//?4.?定義何時(shí)處理幻燈片輸出
window.onload=function(){
addSliders();
switchSlider(1);
setTimeout(function(){
movePictures();
},100)
}

</script>
</div>
</body>
</html>