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

為什么我的效果不一樣，有人能幫幫我解答嗎？

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
? ?<style>
* {
? ? ? ? ? ?padding: 0;
margin: 0;
}
? ? ? ?body {
? ? ? ? ? ?padding: 50px 0;
background-color: #fff;
font-size: 14px;
font-family: "微軟雅黑";
color: #555;
-webkit-font-smoothing: antialiased; ? ? ? ?/*字體抗鋸齒*/
}

? ? ? ?.main-i,
.main,
.slider {
? ? ? ? ? ?width: 100%;
height: 400px;
position: relative;
}
? ? ? ?/*幻燈片區(qū)域*/
.main {
? ? ? ? ? ?overflow: hidden;
}
? ? ? ?/*每一個幻燈片的樣式*/
.main-i{}
? ? ? ?.main-i img {
? ? ? ? ? ?width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}

? ? ? ?/*控制按鈕區(qū)域*/
.ctrl {
? ? ? ? ? ?width: 100%;
height: 13px;
line-height: 13px;
text-align: center; ? ? ? ? /*使控制按鈕水平居中*/
left: 0;
position: absolute;
bottom: -13px;
background-color: #ff0000;
}
? ? ? ?.ctrl-i {
? ? ? ? ? ?display: inline-block; ? /* 只有設置inline-block，我們設置的寬度和高度才起作用*/
width: 150px;
height: 13px;
background-color: #666;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
position: relative;
margin-left: 1px;
}
? ? ? ?.ctrl-i ?img {
? ? ? ? ? ?opacity: 0;
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
z-index: 1;
-webkit-transition: all .1s; /*添加過渡動畫*/
}

/*hover控制按鈕的樣式*/
.ctrl-i:hover {
? ? ? ? ? ?background-color: #f0f0f0;
}
? ? ? ?.ctrl-i:hover img ?{
? ? ? ? ? ?opacity: 1;
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))
? ? ? ? ? ?);
}

/*控制按鈕active 當前展現(xiàn)的狀態(tài)*/
.ctrl-i_active:hover,
.ctrl-i_active {
? ? ? ? ? ?background-color: #000;
}
? ? ? ?.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_active {
? ? ? ? ? ? ?opacity: 1;
right: 0;
}

? ?</style>
</head>
<body>
<div class="slider"> ? ? ? ? ? ? ? ? ? 
? ?
<div class="main" id="template_main">  ? ? ? ? ? ? ? ? 
<div class="main-i main-i_active" id="main_{{index}}">
<img src="images/{{index}}.jpg" alt="">
? ? ? ?</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>

? ?<script type="text/javascript">

//1.數(shù)據(jù)定義（實際生產(chǎn)環(huán)境中，應由后臺給出）
? ? ? ?//data 等于一個數(shù)組
var data=[
? ? ? ? ? ?{img:1}, ? ? //img是對象
{img:2},
{img:3},
{img:4}
? ? ? ?];

//定義通用函數(shù)
var g = function (id) {
? ? ? ? ? ?if (id.substr(0,1)=='.'){
? ? ? ? ? ? ? ?return document.getElementsByClassName (id.substr(1));
}
? ? ? ? ? ?return document.getElementById (id);
};

//添加所有幻燈片的操作以及所有對應按鈕
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ù)，構建最終輸出的html
for( i in data){
? ? ? ? ? ? ? ?var _html_main=tpl_main
? ? ? ? ? ? ? ? ? ? ? ?.replace(/{{index}}/g,data[i].img);
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('');
}
//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(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';
}

//4.定義何時處理幻燈片輸出
window.onload=function() {
? ? ? ? ? ?addSliders();
switchSlider(1);

}
? ?</script>
</div>
</body>
</html>