                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果

源碼，根據(jù)老師的進(jìn)行優(yōu)化和修正BUG，大家討論

<!DOCTYPE?html>
<html>
<head>
	<title>預(yù)覽圖幻燈片切換效果</title>
	<meta?charset="UTF-8">
	<style?type="text/css">
	*{
		padding:?0;
		margin:?0;
	}
	body{
		padding:?50px?0;
		background:?#FFF;
		font-size:?14px;
		font-family:?'Avenir?Next';
		color:?#555;
		-webkit-font-smoothing:?antialiased;
	}

	/*樣式*/
	.slider,
	.slider?.main,
	.slider?.main?.main-i{
		width:?100%;
		height:?400px;
		position:?relative;
	}
	.slider?.main{
		overflow:?hidden;
	}
	/*每一個(gè)幻燈片的樣式*/
	.slider?.main?.main-i{}
	.slider?.main?.main-i?img{
		width:?100%;
		position:?absolute;
		left:?0;
		top:?50%;
		z-index:?1;
	}
	.slider?.main?.main-i?.caption{
		position:?absolute;
		right:?50%;
		top:30%;
		z-index:?9;
		margin-right:?13%;
	}
	.slider?.main?.main-i?.caption?h2{
		font-size:?40px;
		line-height:?50px;
		color:?#b5b5b5;
		text-align:?right;
		margin-right:?45px;
		opacity:?0;
	}
	.slider?.main?.main-i?.caption?h3{
		font-size:?70px;
		line-height:?70px;
		color:?#000000;
		text-align:?right;
		font-family:?'Open?Sans?Condensed';
		margin-right:?-45px;
		opacity:?0;
	}
	/*每一個(gè)控制區(qū)域樣式*/
	.slider?.ctrl{
		width:?100%;
		height:?13px;
		text-align:?center;
		line-height:?13px;
		position:?absolute;
		left:?0;
		bottom:?-13px;
	}
	.slider?.ctrl?.ctrl-i{
		display:?inline-block;
		width:?150px;
		height:?13px;
		background:#666;
		box-shadow:?0?1px?1px?rgba(0,0,0,0.3);
		position:?relative;
		transition:all?0.8s;
		margin-left:?1px;
	}
	.slider?.ctrl?.ctrl-i?img{
		width:?100%;
		position:?absolute;
		left:?0;
		bottom:?50px;
		z-index:?9;
		opacity:?0;
		transition:all?0.5s;
	}
	/*hover?控制按鈕效果*/
	.slider?.ctrl?.ctrl-i:hover{
		background:?#f0f0f0;
	}
	.slider?.ctrl?.ctrl-i:hover?img{
		bottom:?13px;
		opacity:?1;
		-webkit-box-reflect:below?0px?-webkit-gradient(
				linear,
				left?top,
				left?bottom,
				from(transparent),
				color-stop(50%,transparent),
				to(rgba(255,255,255,0.3))
			);
	}
	/*當(dāng)前展現(xiàn)狀態(tài)*/
	.slider?.main?.main-i{
		position:?absolute;
		opacity:?0;
		right:?-50%;
		transition:opacity?0.1s?0.5s,right?0.1s?0.5s;
	}
	.slider?.main?.main-i.margin-right{
		right:?50%;
	}
	.slider?.main?.main-i.main-i-active,
	.slider?.main?.main-i.margin-right.main-i-active{
		opacity:?1;	
		right:0;
		z-index:2;?
		transition:opacity?0.5s,right?0.5s;
	}
	.slider?.main?.main-i.main-i-active?h2,
	.slider?.main?.main-i.main-i-active?h3{
		margin-right:?0;
		opacity:?1;
		transition:all?0.5s?0.5s;
	}
	.slider?.ctrl?.ctrl-i.ctrl-i-active{
		background:?#000;
	}
	.slider?.ctrl?.ctrl-i.ctrl-i-active?img{
		opacity:?0;
	}
	</style>
</head>
<body>
	<div?class="slider">?<!--1.整個(gè)外部盒子!-->
		<div?class="main"?id="template_main">
			<div?class="main-i?{{css}}"?id="main_{{index}}">
				<div?class="caption">
					<h2>{{h2}}</h2>
					<h3>{{h3}}</h3>
				</div>
				<img?src="{{index}}.jpg"?class="picture">
			</div>
		</div>
		<div?class="ctrl"?id="template_ctrl">
			<a?class="ctrl-i"?id="ctrl_{{index}}"?href="javascript:switchSlider({{index}});">
				<img?src="{{index}}.jpg">
			</a>
		</div>
	</div>
	<script?type="text/javascript">
	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?template_main=g('template_main').innerHTML
			.replace(/^\s*/,'')
			.replace(/\s*$/,'');
		var?template_ctrl=g('template_ctrl').innerHTML
			.replace(/^\s*/,'')
			.replace(/\s*$/,'');
		var?out_main='',
			out_ctrl='';

		for(var?i?in?data){
			out_main?+=?template_main
				.replace(/{{index}}/g,data[i].img)
				.replace(/{{h2}}/g,data[i].h1)
				.replace(/{{h3}}/g,data[i].h2)
				.replace(/{{css}}/g,['','margin-right'][i%2]);
			out_ctrl?+=?template_ctrl
				.replace(/{{index}}/g,data[i].img);
		}

		g('template_main').innerHTML=out_main;
		g('template_ctrl').innerHTML=out_ctrl;
	}

	//調(diào)整圖片函數(shù)
	function?movepic?()?{
		var?picture=g('.picture');
		for?(var?j?=?0;?j?<?picture.length;?j++)?{
			picture[j].style.marginTop=picture[j].clientHeight/2*(-1)+'px';
		}
		var?minpic=g('.ctrl-i');
		for?(var?i?=?0;?i?<?minpic.length;?i++)?{
			minpic[i].style.width=Math.min(150,(g('.ctrl')[0].clientWidth-minpic.length)/minpic.length)+'px';
		}
	}

	//切換函數(shù)
	function?switchSlider?(n)?{
		var?_main_i=g('.main-i'),
			_ctrl_i=g('.ctrl-i');
		for?(var?i?=?0;?i?<?_main_i.length;?i++)?{
			_main_i[i].className=_main_i[i].className.replace(/?main-i-active/g,'');
			_ctrl_i[i].className=_ctrl_i[i].className.replace(/?ctrl-i-active/g,'');
		}
		g('main_'+n).className+='?main-i-active';
		g('ctrl_'+n).className+='?ctrl-i-active';
	}

	window.onload=function(){
		addSliders();
		switchSlider(1);
		setTimeout('movepic()',1000);
	};
	window.onresize=function(){
		movepic();
	};
	</script>
</body>
</html>