*{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;}
/*幻燈片區(qū)域*/
.slider?.main{
overflow:hidden;
}
/*每個(gè)幻燈片的樣式*/
.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;}
/*控制區(qū)域*/
.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.通用函數(shù)//
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.定義何時(shí)處理幻燈片輸出
window.onload?=?function(){
addSliders();}<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>無標(biāo)題文檔</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>
