                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS+CSS3实现带预览图幻灯片效果

为什么幻灯片切换不起作用，且main_active的用处不明，是名称还是激活后的样子？

*{padding:0; margin:0;}
body{
	padding:50px 0;
	background-color:#fff;
	font-size:14px;
	color:#555;}
	
.slider,.slider .main{width:100%;
	height:400px;
	position:relative;}
	/*幻灯片区域*/
.slider .main{
	overflow:hidden;
	}
	/*每个幻灯片的样式*/
.slider .main .main-i{}
.slider .main .main-i img{
	width:100%;
	position:absolute;
	left:0;
	top:0;}
.slider .main .main-i .caption{
	position: absolute;
	right: 50%;
	top: -2px;
	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:70px;
	line-height:70px;
	color:#000000;
	text-align:right;}
	
	/*控制区域*/
.slider .ctrl{
	width:100%;
	height:13px;
	text-align:center;
	position:absolute;
	left:0;
	bottom:-13px;
	margin-left:1px;
	}
.slider .ctrl .ctrl-i{
	display:inline-block;
	width:150px;
	height:13px;
	background:#666;
	box-shadow:0 1px 1px rgba(0,0,0,.3);
	position:relative;}
.slider .ctrl .ctrl-i img{
	width:150px;
	position:absolute;
	left:0;
	bottom:50px;
	z-index:1;
	opacity:0;
	-moz-transition:all 0.5s;
	}
/*hover控制按钮样式*/
.slider .ctrl .ctrl-i:hover{
	background:#f0f0f0;}
.slider .ctrl .ctrl-i:hover img{
	bottom:13px;
	opacity:1;
	
	}

	/*active*/

.slider .ctrl .ctrl-i:active{
	background:#000;}
.slider .ctrl .ctrl-i:active img{
	opacity:0;}

var data =[
	{img:1,h1:'Creative',h2:'DUCT'},
	{img:2,h1:'Friendly',h2:'DEVIL'},
	{img:3,h1:'DDDDAAA',h2:'AAAAAD'},
	{img:4,h1:'FWendy',h2:'DADIL'},
	{img:5,h1:'WDy',h2:'WVIL'},
	{img:6,h1:'Cendly',h2:'SDL'},
	{img:7,h1:'FrSndly',h2:'DVIL'},
	];
//2.通用函数//
var g = function (id) {
	if( id.substr(0,1) == '.'){
		return document.getElementByClassName(id.substr(1));
		}
		return document.getElementById(id);
	}
//3.添加幻灯片的操作
function addSliders(){
	var tpl_main = g('template_main').innerHTML
									.replace(/^\s*/,'')
									.replace(/\s*$/,'');
	var tpl_ctrl = g('template_ctrl').innerHTML
									.replace(/^\s*/,'')
									.replace(/\s*$/,'');
	var out_main = [];
	var out_ctrl = [];
	
	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);
		}
		g('template_main').innerHTML = out_main.join('');
		g('template_ctrl').innerHTML = out_ctrl.join('');
	}
//5.幻灯片切换
function switchSlider(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_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();}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/20160221.css" rel="stylesheet" type="text/css">
<script src="JS/20160223.js"></script>
</head>

<body>
<div class="slider">
	<div class="main" id="template_main">
    	<div class="main-i main-i_active"" id="main_{{index}}">
        	<div class="caption">
            	<h2>{{h2}}</h2>
                <h3>{{h3}}</h3>
            </div>
            <img src="image/{{index}}.jpg">
        </div>
    </div>
    <div class="ctrl" id="template_ctrl">
    	<a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider{{index}};"><img src="image/{{index}}.jpg"></a>
       
    </div>
</div> 
</body>
</html>