<!DOCTYPE?html>
<html>
<head>
<title>Preview?AutoTab</title>
<meta?charset="utf8"/>
</head>
<style?type="text/css">
*{padding:0;margin:0}
body{
padding:50px?0;
background-color:?#fff;
font-size:14px;
font-family:?'Avenir?Next';
color:#555;
-webkit-font-smoothing:antialiased;
}
.slidre?.main?.main-i,
.slider?.main,
.slider{
width:?100%;
height:?400px;
position:?relative;
}
.main{
overflow:?hidden;
}
.slider?.main?.main-i{
}
.slider?.main?.main-i?img{
width:?100%;
position:?absolute;
left:?0;
top:?0;
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:?#000;
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;
}
.slider?.ctrl?.ctrl-i{
margin-left:?-6px;
position:?relative;
display:?inline-block;
width:?150px;
height:?13px;
background-color:?#666;
box-shadow:?0?1px?1px?rgba(0,0,0,.3)
}
.slider?.ctrl?.ctrl-i?img{
width:?100%;
position:?absolute;
left:?0;
bottom:?50px;
z-index:?1;
opacity:?0;
-webkit-transition:?all?.2s;
-moz-transition:?all?.2s;
-ms-transition:?all?.2s;
-o-transition:?all?.2s;
transition:?all?.2s;
}
.slider?.ctrl?.ctrl-i:hover{
background:?#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))
);
opacity:?1;
}
.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:?1;
position:?absolute;
top:?0;
right:?50%;
-webkit-transition:?all?.5s;
-moz-transition:?all?.5s;
-ms-transition:?all?.5s;
-o-transition:?all?.5s;
transition:?all?.5s;
}
.slider?.main?.main-i_active{
right:?0;
opacity:?1;
}
/*.slider?.main?.main-i?h2,h3{
-webkit-transition:?all?.8s?1s;
-moz-transition:?all?.8s?1s;
-ms-transition:?all?.8s?1s;
-o-transition:?all?.8s?1s;
transition:?all?.8s?1s;
}
.slider?.main?.main-i?h2{
margin-right:?45px;
}
.slider?.main?.main-i?h3{
margin-right:?-45px;
}
.slider?.main?.main-i_active?h2,
.slider?.main?.main-i_active?h3{
margin-right:?0;
}*/
</style>
<body>
<div?class="slider">
<div?class="main">
<div?class="main-i">
<div?class="caption">
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
<img?src="img/{{index}}.jpg"?alt="">
</div>
<div?class="main-i">
<div?class="caption">
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
<img?src="img/{{index}}.jpg"?alt="">
</div>
</div>
<div?class="ctrl">
<a?href="javascript:;"?class="ctrl-i">
<img?src="img/{{index}}.jpg"?alt="">
</a>
<a?href="javascript:;"?class="ctrl-i">
<img?src="img/{{index}}.jpg"?alt="">
</a>
</div>
</div>
<script?type="text/javascript">
</script>
</body>
</html>
2015-10-10
去掉圖片自己的absolute定位
2015-06-24
.slidre?.main?.main-i, ????.slider?.main, ????.slider{ ????????width:?100%; ????????height:?400px; ????????position:?relative; ????}第一行，?.slidre ?寫錯了。 是 .slider
2015-06-20
我也是，解決了嗎