( ＿ ＿)ノ｜求幫忙看下錯在哪里了。。活生生看了一晚上眼殘看不出啊
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>sliderShow</title>
? ?<link href="CSS/main.css" rel="stylesheet">
? ?<!--script src="JS/control.js"></script-->
</head>
<body>
? ?<div class="slider">
? ? ? ?<!--0.修改VIEW->Template(關(guān)鍵字替換)，增加template id-->
<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="imgs/{{index}}.jpg"/>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
? ?<div class="ctrl" id="template_ctrl">
? ? ? ?<a class="ctrl-i" id="ctrl_{{index}}" href="
? ? ? ?javascript:switchSlider({{index}});"><img src="imgs/{{index}}.jpg"/></a>
? ?</div>
? ?<script type="text/javascript">
? ? ? ?//1.數(shù)據(jù)定義（實際生產(chǎn)環(huán)境中應(yīng)由后臺給出）
var data = [
? ? ? ? ? ?{img:1,h1:'Creative',h2:'DUET'},
? ? ? ? ? ?{img:2,h1:'Friendly',h2:'DEVIL'},
? ? ? ? ? ?{img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
? ? ? ? ? ?{img:4,h1:'Insecure',h2:'HUSSLER'},
? ? ? ? ? ?{img:5,h1:'Loving',h2:'REBEL'},
? ? ? ? ? ?{img:6,h1:'Crazy',h2:'FRIEND'}
? ? ? ?];
? ? ? ?//2.定義通用函數(shù)
var g = function(id){
? ? ? ? ? ?if(id.substr(0,1) == '.'){ //通過classname獲取
return document.getElementsByClassName(id.substr(1));
? ? ? ? ? ?}
? ? ? ? ? ?return document.getElementById(id);
? ? ? ?}
? ? ? ?//3.天假幻燈片操作（所有幻燈片對應(yīng)的按鈕）
function ?addSliders(){
? ? ? ? ? ?//3.1獲取到所有幻燈片母版
var tpl_main = g('template_main').innerHTML
.replace(/^\s*/,'') ? ?//^表示從開頭開始
.replace(/\s*$/,''); ? ?//去除前面和后面的空白符
? ? ? ? ? ?//3.2定義最終輸出 HTML的變量
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)的幻燈片和控制按鈕
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清除獲取到的內(nèi)容的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為當(dāng)前的控制按鈕和幻燈片附加樣式
main.className += ' main-i_active';
? ? ? ? ? ?ctrl.className += ' ctrl-i_active';
? ? ? ?}
? ? ? ?//6.定義合適處理幻燈片輸出
window.onload = function(){
? ? ? ? ? ?addSliders();
? ? ? ? ? ?switchSlider(2)
? ? ? ?}
? ?</script>
</body>
</html>
2017-09-07
你這段代碼放錯位置了
“??<div class="ctrl" id="template_ctrl">
? ? ? ?<a class="ctrl-i" id="ctrl_{{index}}" href="
? ? ? ?javascript:switchSlider({{index}});"><img src="imgs/{{index}}.jpg"/></a>
? ?</div>”
應(yīng)該放在<div class="slider"></div>里面，和<div class="main">同級