为什么我的效果不一样，有人能帮帮我解答吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 50px 0;
background-color: #fff;
font-size: 14px;
font-family: "微软雅黑";
color: #555;
-webkit-font-smoothing: antialiased; /*字体抗锯齿*/
}
.main-i,
.main,
.slider {
width: 100%;
height: 400px;
position: relative;
}
/*幻灯片区域*/
.main {
overflow: hidden;
}
/*每一个幻灯片的样式*/
.main-i{}
.main-i img {
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
/*控制按钮区域*/
.ctrl {
width: 100%;
height: 13px;
line-height: 13px;
text-align: center; /*使控制按钮水平居中*/
left: 0;
position: absolute;
bottom: -13px;
background-color: #ff0000;
}
.ctrl-i {
display: inline-block; /* 只有设置inline-block，我们设置的宽度和高度才起作用*/
width: 150px;
height: 13px;
background-color: #666;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
position: relative;
margin-left: 1px;
}
.ctrl-i img {
opacity: 0;
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
z-index: 1;
-webkit-transition: all .1s; /*添加过渡动画*/
}
/*hover控制按钮的样式*/
.ctrl-i:hover {
background-color: #f0f0f0;
}
.ctrl-i:hover img {
opacity: 1;
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))
);
}
/*控制按钮active 当前展现的状态*/
.ctrl-i_active:hover,
.ctrl-i_active {
background-color: #000;
}
.ctrl-i_active:hover img{
opacity: 0;
}
/*幻灯片切换的样式*/
.slider .main .main-i { /*初始样式*/
opacity: 0;
position: absolute;
right: 50%;
top: 0;
-webkit-transition: all .5s; /*添加过渡动画*/
}
/*切换成功后的样式*/
.slider .main .main-i_active {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<div class="slider"> <!-- 最大的幻灯片内容区-->
<!--0.修改view转换为模板（template(关键字替换)，增加template id）-->
<div class="main" id="template_main"> <!--id="template_main"是幻灯片的模板--> <!-- 所有幻灯片区-->
<div class="main-i main-i_active" id="main_{{index}}"><!--{{index}}不是具体的值，将来会被修改成幻灯图片的地址-->
<img src="images/{{index}}.jpg" alt="">
</div>
</div>
<!--控制按钮的模板-->
<div class="ctrl" id="template_ctrl"> <!-- 所有的控制按钮区-->
<!-- 这个链接是每一个控制按钮-->
<a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"><img src="images/{{index}}.jpg"></a>
</div>
<script type="text/javascript">
//1.数据定义（实际生产环境中，应由后台给出）
//data 等于一个数组
var data=[
{img:1}, //img是对象
{img:2},
{img:3},
{img:4}
];
//定义通用函数
var g = function (id) {
if (id.substr(0,1)=='.'){
return document.getElementsByClassName (id.substr(1));
}
return document.getElementById (id);
};
//添加所有幻灯片的操作以及所有对应按钮
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);
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_ctrl.length;i++){
clear_main[i].className=clear_main[i].className
.replace('main-i_active','')
clear_ctrl[i].className=clear_ctrl[i].className
.replace('ctrl-i_active','')
}
//5.4为当前控制按钮和幻灯片附加样式
main.className='main-i_active';
ctrl.className='ctrl-i_active';
}
//4.定义何时处理幻灯片输出
window.onload=function() {
addSliders();
switchSlider(1);
}
</script>
</div>
</body>
</html>
