為啥圖片會溢出？

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ù)，構(gòu)建最終輸出的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);

}