js+css3的炫酷幻燈片效果

oofw5751 9年前發布 | 7K 次閱讀 JavaScript jQuery CSS3

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>
 本文由用戶 oofw5751 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！