js代碼都按著寫了,可是為啥這樣呢?
為啥圖片會溢出?
js代碼:
? 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:'Passionsate',h2:'SEEKER'},
? ? ? ? {img:7,h1:'Crazy',h2:'FRIEND'},
? ? ];
var g=function(id){
if(id.substr(0,1)=="."){
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
? //添加幻燈片的操作
? ? ?function addSliders(){
//獲取模板
var tel_main=g("template_main").innerHTML
? ? ? ? ? ? ? ? .replace(/^\s*/,"")
.replace(/\s*$/,"")
?
?var tel_ctrl=g("template_ctrl").innerHTML
? ? ? ? ? ? ? ? .replace(/^\s*/,"")
.replace(/\s*$/,"")
//最終要輸出的變量
? var out_main=[];
? var out_ctrl=[];
??
? //遍歷所有數(shù)據(jù),構建最終輸出的HTML
? ? ?for(i in data){
?var _html_main= tel_main
? ? ? ? .replace(/{{index}}/g, data[i].img)
.replace(/{{h1}}/g, data[i].h2)
.replace(/{{h2}}/g, data[i].h3)
?var _html_ctrl=tel_ctrl
? ? ? ? ?.replace(/{{index}}/g, data[i].img)
?
?out_main.push(_html_main);
?out_ctrl.push(_html_ctrl);
?}
?
//把html回寫到dom
?g("template_main").innerHTML=out_main.join('');
?g("template_ctrl").innerHTML=out_ctrl.join('');
}
//幻燈片切換
function switchSlider(n){
//獲得由展現(xiàn)的幻燈片和控制按鈕
var main=g("main_"+n);
var ctrl=g("ctrl_"+n)
//獲得所有的幻燈片和控制按鈕
? ? var clear_main=g(".main_i");
var clear_ctrl=g(".ctrl_i");
? 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','")
? }
main.className+="main_i_active"
ctrl.className+="ctrl_i_active"
??
}
?
?window.onload=function(){
? addSliders();
?switchSlider(1);
}
2016-12-22
main.className+="main_i_active"
ctrl.className+="ctrl_i_active"
少了空格