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

我在做到5.2步驟的時候按按鈕沒有反應(yīng)，視頻里面有反應(yīng) main.className += ' main-i_active';感覺這里有問題，求救

<!DOCTYPE html>
<html>
<head>
??? <meta charset="utf-8" />
??? <title></title>
??? <style type="text/css">
??????? * {
??????????? padding: 0;
??????????? margin: 0;
??????????? list-style-type: none;
??????????? text-decoration: none;
??????????? border: 0;
??????? }

??????? body {
??????????? background-color: #fff;
??????????? color: #555;
??????????? font-family: 'Avenir Next';
??????????? font-size: 14px;
??????????? -webkit-font-smoothing: antialiased; /*字體平滑*/
??????? }

??????? .slider .main .main-i, .slider .main, .slider {
??????????? width: 100%;
??????????? height: 400px;
??????????? position: relative;
??????? }
??????????? /*幻燈片區(qū)域*/
??????????? .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: 40px;
??????????????????????????? font-size: 70px;
??????????????????????????? line-height: 70px;
??????????????????????????? color: #000000;
??????????????????????????? text-align: right;
??????????????????????? }
??????????? /*控制按鈕區(qū)域*/
??????????? .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; /*一行內(nèi)塊級元素*/
??????????????????? width: 150px;
??????????????????? height: 13px;
??????????????????? background-color: #666;
??????????????????? box-shadow: 0 1px 1px rgba(0,0,0,.3);
??????????????????? position: relative;
??????????????????? z-index: 1;
??????????????????? 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;
??????????????????????? }
??????????????? /*active 當(dāng)前展示的狀態(tài)*/
??????????????? .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;
??????????????? top: 0;
??????????????? right: 50%;
??????????????? -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 {
??????????????? right: 0;
??????????????? opacity: 1;
??????????? }

??????????????? .slider .main .main-i_active h2,
??????????????? .slider .main .main-i_active h3 {
??????????????????? margin-right: 0;
??????????????? }
??? </style>
</head>
<body>
??? <div class="slider">
??????? 
??????? <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="img/{{index}}.jpg" />
??????????? </div>
??????? </div>
??????? <div class="ctrl" id="template_ctrl">
??????????? <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}};);">
??????????????? <img src="img/{{index}}.jpg" /></a>
??????? </div>
??? </div>
</body>
<script type="text/javascript">

??? // 1.數(shù)據(jù)定義(實際生產(chǎn)環(huán)境中，應(yīng)用后臺數(shù)據(jù))
??? var data = [
??????? { img: 1, h2: 'h1', h3: 'h2' },
??????? { img: 2, h2: 'h1', h3: 'h2' },
??????? { img: 3, h2: 'h1', h3: 'h2' },
??????? { img: 4, h2: 'h1', h3: 'h2' },
??????? { img: 5, h2: 'h1', h3: 'h2' },
??????? { img: 6, h2: 'h1', h3: 'h2' },
??????? { img: 7, h2: 'h1', h3: 'h2' }
??? ];
??? //2.通用函數(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ù)，構(gòu)建最終輸出的 HTML
??????? for (i in data) {
??????????? var _html_main = tpl_main
??????????????? .replace(/{{index}}/g, data[i].img)
??????????????? .replace(/{{h2}}/g, data[i].h2)
??????????????? .replace(/{{h3}}/g, data[i].h3);//運用數(shù)組，調(diào)用內(nèi)容

??????????? 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');

??????? main.className += ' main-i_active';
??????? ctrl.className += ' ctrl-i_active';
??? }
??? // 4. 定義合適處理幻燈片輸出
??? //window執(zhí)行完畢
??? window.onload = function () {
??????? addSliders();
??? }
</script>
</html>