代码，终于拿到了
<!DOCTYPE html>
<html>
<head>
<title>css+js预览图幻灯片</title>
<meta charset="utf-8">
<style type="text/css">
*{padding:0; margin: 0;}
body{
padding:50px 0;/*上下边距*/
background-color: #FFF;
font-size:14px;
font-family:'Avenir14px;
color:#555; Next';
-webkit-font-smooting:antialiased;
-o-font-smooting:antialiased;
-moz-font-smoooting:antialiased;
-ms-font-smooting:antialiased;/*字体抗锯齿
*/
}
.slider,
.slider .main,
.slider .main .main-i{
width: 100%;
height: 400px;
position: relative;
}
/*幻灯片区域*/
.slider .main{
overflow: hidden;
}
/*每一个幻灯片的样式*/
.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;
}
.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;
font-family: 'Open Sans Condensed';
}
/*控制按钮区域*/
.slider .ctrl{
width: 100%;
height: 13px;
line-height: 13px;
text-align: center;
position: absolute;
left: 0;
bottom: -13px;
/*background-color: #f00;*/
}
.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;
margin-left: 1px;
}
.slider .ctrl .ctrl-i img{
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
z-index: 1;
opacity: 0;
-webkit-transition:all .2s;
-o-transition:all 0.2s;
-moz-transition:all 0.2s;
transition:all 0.2s;
}
/*hover 到控制按钮的样式*/
.slider .ctrl .ctrl-i:hover{
background-color: #f0f0f0;
}
.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))
) ;
-o-box-reflect:below 0px -webkit-gradient(
linear,
left top,
left bottom,
from( transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,.3))
) ;
-moz-box-reflect:below 0px -webkit-gradient(
linear,
left top,
left bottom,
from( transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,.3))
) ;
-ms-box-reflect:below 0px -webkit-gradient(
linear,
left top,
left bottom,
from( transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,.3))
) ;
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;
z-index: 20;
}
/*active 当前展现的状态*/
.slider .ctrl .ctrl-i_active:hover,
.slider .ctrl .ctrl-i_active{
background-color: #000;
}
.slider .ctrl .ctrl-i_active:hover img{
opacity: 0;
}
/*幻灯片切换样式*/
.slider .main .main-i{
opacity: 0;
position: absolute;
right: 50%;
top: 0;
-webkit-transition:all .5s;
transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.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{
-webkit-transition:all .8s 1s;
transition:all 1s 0.8s;
-o-transition:all 1s 0.8s;
-moz-transition:all 1s 0.8s;
}
#main_background,
.slider .main .main-i_active{
right:0;
opacity:1;
z-index:2;
}
#main_background{
z-index:1;
}
.slider .main .main-i_active h2,
.slider .main .main-i_active h3{
margin-right: 0px;
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 {{css}}" id="main_{{index}}">
<div class="caption">
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
<img src="./img/{{index}}.png" class="picture"/>
</div>
</div>
<!--控制区域-->
<div class="ctrl" id="template_ctrl">
<a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
<img src="./img/{{index}}.png"/>
</a>
</div>
<!--VCD：js就是C=controller-->
