没有效果求解
为什么我做的就没有动态效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换导航栏</title>
<style>
*{padding:0; margin:0;}
body{
padding:50px 0;
background-color:#FFF;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#555;
-webkit-font-smoothing:antialiased;/*字体抗锯齿*/
}
.slider,.slider .main,.slider .main .main-i{
width:100%;
height:400px;
position:relative;}
.slider .main{ overflow:hidden;}
.slider .main .main-i img{
width:100%;
position:absolute;
top:0;
left:0;
z-index:1;}
.slider .main .main-i .caption{
z-index:2;
position:absolute;
right:50%;
top:30%;}
.slider .main .main-i .caption h2{
font-size:40px;
line-height:50px;
color:#CCC;
text-align:right;}
.slider .main .main-i .caption h3{
font-size:70px;
line-height:70px;
color:#000;
text-align:right;
font-family:"Lucida Console", Monaco, monospace;}
.slider .ctrl{
width:100%
height:13px;
line-height:13px;
text-align:center;
position:absolute;
left:0;
bottom:-13px;
background-color:#F06;}
.slider .ctrl .ctrl-i{
display:inline-block;
width:150px;
height:13px;
background-color:#666;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
position:relative;
}
.slider .ctrl .ctrl-i img{
width:100%;
position:absolute;
left:0;
bottom:50px;
z-index:1;
opacity:0;
-webkit-transition:all .2s;
}
/*hover的样式*/
.slider .ctrl .ctrl-i:hover{ background-color:#666;}
.slider .ctrl .ctrl-i:hover img{
bottom:13px;
-webkit-box-reflect:below 0px/*<!--倒影-->*/
-webkit-gradient(/*遮罩效果*/
linear,
left top,
left bottom,
from(transparent),
color-stop(50%,transparent),
to(rgba(255,255,255,.3))
) ;
opacity:1;}
/*当前状态*/
.slider .ctrl .ctrl-i_active,.slider .ctrl .ctrl-i_active:hover{
background-color:#000;}
.slider .ctrl .ctrl-i_active img{
opacity:0;
}
/*幻灯片切换样式*/
.slider .main .main-i{
opacity:0;
position:absolute;
right:50%;
top:0;
}
.slider .main .main-i_active{opacity:1;right:0;}
.slider .main .main-i h2{
margin-right:45px;}
.slider .main .main-i h3{
margin-right:-45px;
}
.slider .main .main-i h2,
.slider .main .main-i h3{
opacity:0;
-webkit-transition:all 1s .8s;}
.slider .main .main-i_active h2,
.slider .main .main-i_active h3{
margin-right:0;
opacity:1;}
.slider .main .main-i .caption{
margin-right:13%;}
</style>
</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="img/{{index}}.jpg" />
</div>
</div>
<div class="ctrl " id="template_ctrl">
<a class="ctrl-i ctrl-i_active" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
<img src="img/{{index}}.jpg" />
</a>
</div>
</div>
<script type="text/javascript">
//数据定义，应由后台给出
var data =[
{img:1,h1:'好',h2:'时尚'},
{img:2,h1:'你的好',h2:'时的尚'},
{img:3,h1:'你地方好',h2:'时放到尚'},
{img:4,h1:'你的好',h2:'让他时尚'},
{img:5,h1:'你有好',h2:'与时尚'},
{img:6,h1:'你有好',h2:'时尚'},
{img:7,h1:'你UI好',h2:'i时尚'}
];
//同用函数g获取dom
var g = function(id){
if(id.substr(0,1)=='.'){return document.getElementByClassName(id.substr(1));}
return document.getElementById(id);
}
//添加幻灯片的操作及对应的按钮
function addSliders(){
//获取模板
var tpl_mian = 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=[];
//遍历输出的数据构建最终的输出HTML
for(i in data){
//临时的
var _html_main = tpl_mian.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);
}
//把HTML 会写到对应的Dom里
g('template_main').innerHTML=out_main.join('');
g('template_ctrl').innerHTML=out_ctrl.join('');
}
//幻灯片切换
function switchSlider(n){
//获得要展现的幻灯片和控制按钮DOM
var main=g('main_'+n);
var ctrl= g('ctrl_'+n);
//获得所有幻灯片和控制按钮
var clear_mian = g('.main-i');
var clear_ctrl = g('.ctrl-i');
//清除他们activ样式
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';
}
//定义何时处理幻灯片输出
window.onload = function(){
addSliders();
switchSlider(1);
}
</script>
</body>
</html>
