main.className?+=?' main-i_active';????

ctrl.className?+=?' ctrl-i_active';

記得"main-i_active"前面加一個空格 這樣添加類的時候才不會和之前的類"main-i"連在已簽約

//1.數據定義(實際生產環境中，應由后臺給出)
var?data?=?[
	{img:1,h1:'Creative',h2:'DUTE'},
	{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:'Passionate',h2:'SEEKER'},
	{img:7,h1:'Crazy',h2:'FRIEND'}
]
//2.通用函數
var?g?=?function(id){
	if(id.substr(0,1)=='.'){
		return?document.getElementsByClassName(id.substr(1))
	}
	return?document.getElementById(id)
}
//3.添加幻燈片的操作（所有幻燈片&對應的按鈕）
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遍歷所有數據，構建最終輸出的HTML
	for(i?in?data){
		var?_html_main?=?tpl_main.replace(/{{index}}/g,data[i].img).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回寫到對應的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_main.length;?i++)?{
		clear_ctrl[i].className?=?clear_ctrl[i].className.replace('ctrl-i_active','');
		clear_main[i].className?=?clear_main[i].className.replace('main-i_active','');
	}
	main.className?+=?'main-i_active';
	ctrl.className?+=?'ctrl-i_active';
}
//4.定義何時處理幻燈片輸出
window.onload?=?function(){
	addSliders();
	switchSlider();
}