1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{padding: 50px 0;-webkit-font-smoothing:antialiased;}
.wrapper,.main,.main-i{width: 100%;height: 400px;position: relative;}
.main{overflow: hidden;}
.main-i img{width: 100%;position: relative;left: 0;top: 0;}
.caption{position: absolute;top: 50%;left: 30%;text-align: right;z-index: 100;}
.caption h2{font-size: 40px;color: #b5b5b5;margin-right: 45px;}
.caption h3{font-size: 70px;margin-right: -45px;}
.caption h2,
.caption h3{-webkit-transition:all .8s 0.5s;}
.ctrl{position: absolute;width: 100%;height: 13px;line-height: 13px;text-align: center;bottom: -13px;}
.ctrl-i{width: 150px;display: inline-block;height: 13px;background: #666;box-shadow: 0 1px 1px rgba(0,0,0,.3);position: relative;cursor: pointer;}
.ctrl-i img{width: 100%;position: absolute;left: 0;bottom: 50px;opacity: 0;-webkit-transition:all .5s;}
.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;z-index: 100;}
.ctrl-i_active{
background: #000;
}
.ctrl-i_active:hover img{
opacity: 0;
}
.main-i{opacity: 0;position: absolute;top: 0;-webkit-transition:all .5s;}
.background_img,.main-i_active{opacity: 1;right: 0 !important;z-index: 2}
.background_img{z-index: 1;width: 100%;}
.main-i_active h2,
.main-i_active h3{
margin-right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="main-i main-i_active">
<div class="caption">
<h2>你好</h2>
<h3>Hello</h3>
</div>
<img src="img/1.jpg">
</div>
<div class="main-i">
<div class="caption">
<h2>你好</h2>
<h3>Hello</h3>
</div>
<img src="img/2.jpg">
</div>
<div class="main-i">
<div class="caption">
<h2>你好</h2>
<h3>Hello</h3>
</div>
<img src="img/3.jpg">
</div>
<img src="" class="background_img" alt="">
</div>
<div class="ctrl">
<a class="ctrl-i ctrl-i_active" >
<img src="img/1.jpg">
</a>
<a class="ctrl-i" >
<img src="img/2.jpg">
</a>
<a class="ctrl-i" >
<img src="img/3.jpg">
</a>
</div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var _ctrl = $(".ctrl").find("a");
$(".main-i:odd").css("right","50%");
$(".main-i:even").css("right","-50%");
_ctrl.on("click",function(){
var index = $(this).index();
$(this).addClass(".ctrl-i_active")
.siblings().removeClass("ctrl-i_active");
$(".main>div").eq(index).addClass("main-i_active")
.siblings().removeClass("main-i_active");
$(".background_img").attr("src","img/" + (index + 1) + ".jpg")
})
})
</script>
</body>
</html>
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/8552.html