图片垂直居中那个地方有问题，clientHeight获取到的是750px,帮忙看看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Preview Slideshow</title>
<style>
*{
padding:0;
margin: 0;
}
body{
padding:50px 0;
background-color: #fff;
font-size:14px;
font-family:'Avenir Next';
color:#555;
-webkit-font-smoothing:antialiased;
/*字体抗锯齿*/
}
.slider .ctrl .ctrl-i,
.slider .main .main-i,
.slider .main,
.slider{
width: 100%;
height: 400px;
position:relative;
}
.slider .main{
overflow: hidden;
}
.slider .main .main-i img{
width: 100%;
position:absolute;
left: 0;
top:0;
}
.slider .main .main-i .caption{
position: absolute;
right: 50%;
top: 30%;
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{
text-align: right;
font-size: 70px;
line-height: 70px;
color: #000;
font-family: 'Open Sans Condensed';
}
.slider .main #main_background{
z-index: 1
}
.slider .ctrl{
width: 100%;
height: 13px;
line-height: 13px;
text-align: center;
position: absolute;
left: 0;
bottom: -13px;
}
.slider .ctrl .ctrl-i{
display: inline-block;
width: 150px;
height: 13px;
background-color: #666;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
z-index: 10;
margin-left: 1px;
}
.slider .ctrl .ctrl-i img{
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
}
/*制作鼠标经过ctrl的效果*/
.slider .ctrl .ctrl-i:hover{
background-color: #f0f0f0;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.slider .ctrl .ctrl-i:hover img{
bottom: 13px;
transition: all .3s ease-in-out;
-webkit-box-reflect:below 0 -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%,transparent),
to( rgba(255,255,255,.3))
);
}
.slider .ctrl .ctrl-i-active,
.slider .ctrl .ctrl-i-active:hover{
background-color: #000;
}
.slider .ctrl .ctrl-i:hover img{
opacity: 1;
}
.slider .ctrl .ctrl-i img,
.slider .ctrl .ctrl-i-active img,
.slider .ctrl .ctrl-i-active:hover img{
opacity: 0;
}
.slider .main .main-i .caption{
margin-right: 13%;
}
.slider .main .main-i .caption h2{
margin-right: 45px;
}
.slider .main .main-i .caption h3{
margin-right: -45px;
}
#main_background,
.slider .main .main-i-active{
right: 0;
opacity: 1;
z-index: 2;
}
#main_background{
z-index: 1;
}
.slider .main .main-i-active .caption h2,
.slider .main .main-i-active .caption h3{
margin-right:0;
transition: all 1s 0.8s;
-moz-transition: all 1s 0.8s; /* Firefox 4 */
-webkit-transition: all 1s 0.8s; /* Safari 和 Chrome */
-o-transition: all 1s 0.8s; /* Opera */
}
.slider .main .main-i-active img{
position: absolute;
right: 50%;
top: 0;
}
/*设置幻灯片的样式*/
.slider .main .main-i {
position: absolute;
right: 50%;
top: 0;
opacity: 0;
z-index: 2;
}
.slider .main .main-i-right{
right: -50%;
}
.slider .main .main-i-active{
transition: all 0.8s;
-moz-transition: all 0.8s; /* Firefox 4 */
-webkit-transition: all 0.8s; /* Safari 和 Chrome */
-o-transition: all 0.8s; /* Opera */
opacity: 1;
right: 0;
}
</style>
<script>
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:'别逼一个最爱你的人',h2:'即兴表演'}
]
var g = function(id){
if(id.substr(0,1)=='.'){
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
function addSliders(){
var tpl_main = g('template_main').innerHTML
.replace(/^\s*/,'')
.replace(/\s*$/,'');
var tpl_ctrl = g('template_ctrl').innerHTML
.replace(/^\s*/,'')
.replace(/\s*$/,'');
//定义数值用于将html内容push到out_main中
var out_main=[];
var out_ctrl=[];
for(i in data){
//这里用到正则表达式的全局匹配//g,这里需要注意使用for in方法是有前提的（是真正意义上的数组）
var html_main=tpl_main.replace(/{{index}}/g,data[i].img)
.replace(/{{H2}}/g,data[i].h1)
.replace(/{{H3}}/g,data[i].h2)
.replace(/{{css}}/g,['','main-i-right'][i%2]);
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('');
g('template_main').innerHTML+=tpl_main.replace(/{{index}}/g,'{{index}}')
.replace(/{{H2}}/g,data[i].h1)
.replace(/{{H3}}/g,data[i].h2);
g('main_{{index}}').id = 'main_background';
}
function switchSlide(n){
var main = g('main_'+n);
var ctrl = g('ctrl_'+n);
//错误写法：下面两句的写法来去掉所有元素的active class是错误的，因为g('.main-i')获得的东西是类名为main-i的全部元素信息
// g('.main-i').className="main-i";
// g('.ctrl-i').className="ctrl-i";
// console.log(g('.main-i'));
var clear_main = g('.main-i');
var clear_ctrl = g('.ctrl-i');
for (var 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','');
}
//这里添加类名的时候要注意前面要加个空格，老师视频里没提到，不过去调试页面看下也就知道了
main.className += ' main-i-active';
ctrl.className += ' ctrl-i-active';
setTimeout(function(){
g('main_background').innerHTML = main.innerHTML;
},1000)
}
// function SetimgHeight(){
// var pictures = g('.picture');
// for (var i = 0; i < pictures.length; i++) {
// pictures[i].style.marginTop = (-1 * pictures[i].clientHeight/2)+'px';
// }
// }
window.onload = function(){
addSliders();
switchSlide(2);
// setTimeout(function(){
// SetimgHeight();
// },100);
}
</script>
</head>
<body>
<div>
<div id="template_main">
<div class="main-i {{css}}" id="main_{{index}}">
<div>
<h2>{{H2}}</h2>
<h3>{{H3}}</h3>
</div>
<img src="imgs/{{index}}.jpg" alt="">
</div>
</div>
<div id="template_ctrl">
<a id="ctrl_{{index}}" href="javascript:switchSlide({{index}});">
<img src="imgs/{{index}}.jpg" alt="">
</a>
</div>
</div>
</body>
</html>
