- <!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 src1="img/1.jpg">
- </div>
- <div class="main-i">
- <div class="caption">
- <h2>你好</h2>
- <h3>Hello</h3>
- </div>
- <img src1="img/2.jpg">
- </div>
- <div class="main-i">
- <div class="caption">
- <h2>你好</h2>
- <h3>Hello</h3>
- </div>
- <img src1="img/3.jpg">
- </div>
- <img src1="" class="background_img" alt="">
- </div>
- <div class="ctrl">
- <a class="ctrl-i ctrl-i_active" >
- <img src1="img/1.jpg">
- </a>
- <a class="ctrl-i" >
- <img src1="img/2.jpg">
- </a>
- <a class="ctrl-i" >
- <img src1="img/3.jpg">
- </a>
- </div>
- </div>
- <script type="text/javascript" src1="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>
- //该片段来自于http://www.codesnippet.cn/detail/2906201512962.html
来源: http://www.codesnippet.cn/detail/2906201512962.html