使用swiper实现移动端小场景

最新推荐文章于 2025-05-31 20:13:02 发布

zhanghao86_

最新推荐文章于 2025-05-31 20:13:02 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： swiper html5 css3 移动端小场景

本文链接：https://blog.youkuaiyun.com/zhanghao86_/article/details/77444676

web前端专栏收录该内容

13 篇文章

订阅专栏

swiper是一个专业的轮播插件里面的方法易于学习，种类齐全，大部分直接加个类名就可以使用了，里面的animate方法更是实现了h5c3的一些功能效果。所以用swiper写移动端的h5界面和一些小场景真的非常好用，推荐使用（试看的时候加载过程可能比较慢，需耐心等待，另外代码中的图片全是在我本人的文件夹里。直接粘贴复制肯定是没有的，需要自己下载，试看时候好的体验需要把窗口调成适合手机的屏幕，全屏体验不好，缩小窗口体验更佳，具体样式效果代码编写见swiper官方文档）。

点击试看

index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <link rel="stylesheet" href="swiper.min.css">
    <link rel="stylesheet" href="animate.min.css">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="music">
    <img src="cmbChina%20demo/images/musicBtn.png" alt="" class="musicImg">
    <audio src="cmbChina%20demo/images/music.mp3" autoplay class="audio">
    </audio>
</div>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide index-first">
                <img src="cmbChina%20demo/images/indexTxt.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
                <img src="cmbChina%20demo/images/indexFlowers01.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
                <img src="cmbChina%20demo/images/indexFlowers02.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1s">
                <div class="ani index-flight" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="1s">
                    <img src="cmbChina%20demo/images/indexFlight.png" alt="" class="ani infinite" id="flight" swiper-animate-effect="pulse" swiper-animate-duration="2s" swiper-animate-delay="0s">
                </div>
                <div class="ani index-star" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="0.7s">
                    <img src="cmbChina%20demo/images/indexStars.png" alt="" class="ani infinite" id="star" swiper-animate-effect="pulse" swiper-animate-duration="2s" swiper-animate-delay="0.8s">
                </div>
                <div class="ani index-cloud" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="0.9s">
                    <img src="cmbChina%20demo/images/indexCloud.png" alt="" class="ani infinite" id="cloud" swiper-animate-effect="pulse" swiper-animate-duration="2s" swiper-animate-delay="0.6s">
                </div>
                <div class="ani index-end" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
                    <img src="cmbChina%20demo/images/endBg.png" alt="" class="ani infinite" id="end" swiper-animate-effect="pulse" swiper-animate-duration="2s" swiper-animate-delay="0.6s">
                </div>
                <img src="cmbChina%20demo/images/indexBuilding.png" alt="" class="ani building"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
                <img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
            </div>
        <div class="swiper-slide index-second">
            <img src="cmbChina%20demo/images/wasBg.jpg" alt="" class="ani wasBg"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
            <img src="cmbChina%20demo/images/wasIT.png" alt="" class="ani wasIT"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
            <img src="cmbChina%20demo/images/wasFarm.png" alt="" class="ani wasFarm"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="cmbChina%20demo/images/wasStar.png" alt="" class="ani wasStar"  swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
            <img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
        </div>
        <div class="swiper-slide  index-third">
            <div class="ani index-earlyBg" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
                <img src="cmbChina%20demo/images/earlyBg.jpg" alt="" class="ani earlyBg"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="7s">
            </div>
            <div class="ani index-earlyBuilding" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.8s">
                <img src="cmbChina%20demo/images/earlyBuilding.png" alt="" class="ani earlyBuilding"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2.8s">
            </div>
            <div class="ani index-earlyTitle" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.2s">
                <img src="cmbChina%20demo/images/earlyTitle.png" alt="" class="ani earlyTitle"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2.8s">
            </div>
            <div class="ani index-lastBusStation" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="3.8s">
                <img src="cmbChina%20demo/images/lastBusStation.png" alt="" class="ani lastBusStation"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="6.5s">
            </div>
            <div class="ani index-bus" swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s" swiper-animate-delay="4.2s">
                <img src="cmbChina%20demo/images/bus.png" alt="" class="ani bus"  swiper-animate-effect="slideOutLeft" swiper-animate-duration="1.3s" swiper-animate-delay="4.4s">
            </div>
            <div class="ani index-lastBusAvatar" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="4.4s">
                <img src="cmbChina%20demo/images/lastBusAvatar.png" alt="" class="ani lastBusAvatar"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="6.5s">
            </div>
            <div class="ani index-lastBusTitle" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="4.6s">
                <img src="cmbChina%20demo/images/lastBusTitle.png" alt="" class="ani lastBusTitle"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="6.5s">
            </div>
            <img src="cmbChina%20demo/images/myTeamBg.jpg" alt="" class="ani myTeamBg"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.7s">
            <div class="ani myTeamFoot"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.7s"></div>
            <img src="cmbChina%20demo/images/myTeamWall.png" alt="" class="ani myTeamWall"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.7s">
            <img src="cmbChina%20demo/images/myTeamAvatar.png" alt="" class="ani myTeamAvatar"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="8s">
            <img src="cmbChina%20demo/images/myTeamTxt.png" alt="" class="ani myTeamTxt"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8.5s">
            <img src="cmbChina%20demo/images/myTeamTxt01.png" alt="" class="ani myTeamTxt01"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8.7s">
            <img src="cmbChina%20demo/images/myTeamTxt02.png" alt="" class="ani myTeamTxt02"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8.9s">
            <img src="cmbChina%20demo/images/myTeamTxt03.png" alt="" class="ani myTeamTxt03"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="9.1s">
            <img src="cmbChina%20demo/images/myteamWhereTxt.png" alt="" class="ani myteamWhereTxt"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="9.3s">
            <img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="8.8s">
        </div>
        <div class="swiper-slide index-fourth">
            <div class="index-fourth-out">
                <img src="cmbChina%20demo/images/lightOffBg.jpg" alt="" class="ani lightOffBg"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.1s" swiper-animate-delay="0.3s">
                <img src="cmbChina%20demo/images/lightOff.png" alt="" class="ani lightOff"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.1s" swiper-animate-delay="0.3s">
                <img src="cmbChina%20demo/images/cornerWall.png" alt="" class="ani cornerWall"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.1s" swiper-animate-delay="0.3s">
                <img src="cmbChina%20demo/images/cornerTitle.png" alt="" class="ani cornerTitle"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
                <div class="ani index-clickGuide"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s">
                    <img src="cmbChina%20demo/images/clickGuide.png" alt="" class="ani infinite clickGuide"  swiper-animate-effect="pulse" swiper-animate-duration="0.8s" swiper-animate-delay="0s">
                </div>
            </div>
            <div class="index-fourth-in" >
                <div class="ani index-fourth-in-bg" swiper-animate-effect="fadeIn" swiper-animate-duration="0s"
 swiper-animate-delay="0s"></div>
                <img src="cmbChina%20demo/images/lightOn.png" alt="" class="ani lightOn" swiper-animate-effect="fadeIn" swiper-animate-duration="0s"
 swiper-animate-delay="0s">
                <img src="cmbChina%20demo/images/weKnowYou.png" alt="" class="ani weKnowYou" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
 swiper-animate-delay="0.8s">
                <img src="cmbChina%20demo/images/lightOnBg.jpg" alt="" class="ani lightOnBg" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
                <img src="cmbChina%20demo/images/lightFlowers.png" alt="" class="ani lightOnFlowers" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
            </div>
        </div>
        <div class="swiper-slide index-fifth">
            <div class="ani index-footTa"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
                <img src="cmbChina%20demo/images/footTa.png" alt="" class="ani footTa"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2s">
            </div>
            <img src="cmbChina%20demo/images/footAvatar.png" alt="" class="ani footAvatar"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5">
            <img src="cmbChina%20demo/images/footCity.jpg" alt="" class="ani footCity"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.6">
            <img src="cmbChina%20demo/images/footTx.png" alt="" class="ani footTx"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.4s">
            <img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
        </div>
        <div class="swiper-slide index-sixth">
            <div class="ani index-runTa"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
                <img src="cmbChina%20demo/images/runTa.png" alt="" class="ani runTa"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2s">
            </div>
            <img src="cmbChina%20demo/images/runAvatar.png" alt="" class="ani runAvatar"  swiper-animate-effect="zoomInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
            <img src="cmbChina%20demo/images/runTxt.png" alt="" class="ani runTx"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.4s">
            <img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
        </div>
        <div class="swiper-slide index-seven">
            <div class="ani index-salaryTa"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
                <img src="cmbChina%20demo/images/salaryTa.png" alt="" class="ani salaryTa"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2s">
            </div>
            <img src="cmbChina%20demo/images/salaryTxt.png" alt="" class="ani salaryTx"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.4s">
            <img src="cmbChina%20demo/images/salaryBg.png" alt="" class="ani salaryBg"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="cmbChina%20demo/images/salaryAvatar.png" alt="" class="ani salaryAvatar"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.3s">
            <img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
        </div>
        <div class="swiper-slide index-eighth">
            <div class="ani intro-txtContainer"
                 swiper-animate-delay="0.3s">
                <div class="introTxt">
                    <p>招商银行是世界500强企业，也是我国第一家完全有企业法人持股的股份制商业银行。</p>
                    <p>招银网络科技（简称招银科技）是招商银行的全资子公司，致力于为招商银行全球化发展提供强有力的软件开发及技术支持。公司以成为中国银行业最强大脑为己任，在彼此信任和尊重的基础上，追求高标准的交付和价值创造。现有深圳、杭州两家分支机构，共同担负着招商银行电子信息化的重任。</p>
                    <p>这里是中国最具活力的银行，这里是中国最优秀的金融IT团队之一。如果您足够优秀，那么这里将会是您智慧闪光、价值实现和梦想腾飞的舞台，我们热忱期待您的加盟。</p>
                </div>
            </div>
            <img src="cmbChina%20demo/images/introLogo.png" alt="" class="ani introLogo"  swiper-animate-delay="0.3s">
            <img src="cmbChina%20demo/images/introFlowers.png" alt="" class="ani infinite introFlowers" swiper-animate-effect="pulse" swiper-animate-duration="0.8s"swiper-animate-delay="0.3s" >
            <img src="cmbChina%20demo/images/introCloudy.png" alt="" class="ani introCloudy"  swiper-animate-delay="0.3s">
            <img src="cmbChina%20demo/images/introStar.png" alt="" class="ani infinite introStar" swiper-animate-effect="pulse" swiper-animate-duration="0.5s"swiper-animate-delay="0.3s" >
            <img src="cmbChina%20demo/images/introAvatar.png" alt="" class="ani introAvatar"  swiper-animate-delay="0.3s">
            <img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
        </div>
        <div class="swiper-slide index-last">
            <img src="cmbChina%20demo/images/endLogo.png" alt="" class="ani endLogo"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
            <img src="cmbChina%20demo/images/endTxt.png" alt="" class="ani endTxt"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
            <img src="cmbChina%20demo/images/endMail.png" alt="" class="ani endMail"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
            <img src="cmbChina%20demo/images/endClickGuide.png" alt="" class="ani endClickGuide"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="1s">
            <img src="cmbChina%20demo/images/endBottomTxt.png" alt="" class="ani endBottomTxt"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
            <div class="ani index-endAvatar"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
            <img src="cmbChina%20demo/images/endAvatar.png" alt="" class="ani infinite endAvatar"  swiper-animate-effect="bounce" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
        </div>
            <div class="ani index-endCloudys"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
                <img src="cmbChina%20demo/images/endCloudys.png" alt="" class="ani infinite endCloudys"  swiper-animate-effect="pulse" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
            </div>
        </div>
        </div>

    </div>
    <div class="swiper-pagination"></div>
</div>


<script src="swiper.min.js"></script>
<script src="swiper.animate1.0.2.min.js"></script>
<script src="index.js"></script>
<script src="app.js"></script>
</body>
</html>

index.css代码：

html,body{
    width: 100%;
    height:100%;
}

.swiper-container{
    width: 100%;
    height: 100%;
}
.swiper-slide{

    background-color: #fff;
}

.index-first{
    width: 100%;
    height: 100%;
    background-color: #5173ff;
    position: relative;
}
.building{
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0;
    z-index: 1;
}
.index-first img:first-child{
    position: absolute;
    width: 60%;
    height: 20%;
    top:10%;
    left:20%;
}
.index-first img:nth-child(2){
    position: absolute;
    width: 15%;
    height: 13%;
    left: 10%;
    top:12%;

}
.index-first img:nth-child(3){
    position: absolute;
    top:21%;
    right:22%;
    width: 15%;
    height: 10%;
}
.index-flight{
    position: absolute;
    right:10%;
    top:30%;
    width: 100%;
    height: 30%;
}
#flight{
    width: 80%;
    height: 100%;

}
.index-star{
    position: absolute;
    width: 100%;
    height: 100%;

}
#star{
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
}
.index-cloud{
    position: absolute;
    width: 100%;
    height: 70%;
    z-index: 3;

}
#cloud{
    width: 90%;
    height: 100%;
    top:8%;
    left: 5%;
}
.index-end{
    position: absolute;
    width: 100%;
    height: 90%;
    z-index: 3;

}
#end{
    width: 100%;
    height: 100%;
    top:10%;
    left: 0;

}
.arrow{
    position: absolute;
    left: 45%;
    bottom: 5%;
    width: 10%;
    z-index: 3;
}
.index-second{
    background-color: #000;
    position: relative;
}
.wasBg{
    width: 100%;
    height: 100%;
}
.wasIT{
    width: 60%;
    height: 10%;
    position: absolute;
    left: 20%;
    top:40%;
    z-index: 2;
}
.wasFarm{
    width: 60%;
    height: 10%;
    position: absolute;
    left: 20%;
    top:60%;
    z-index: 2;
}
.wasStar{
    width: 60%;
    height: 60%;
    position: absolute;
    top:20%;
    left:20%;
    z-index: 1;
}
.index-third{
    background-color: #03172f;
    position: relative;
}
.index-earlyBg{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
}
.earlyBg{
    width: 100%;
    height: 60%;
}
.index-earlyBuilding{
    position: absolute;
    width: 100%;
    height: 80%;
    bottom: 0;
    left: 0;
}
.earlyBuilding{
    width: 100%;
    height: 100%;
}

.index-earlyTitle{
    position: absolute;
    width: 25%;
    height: 5%;
    left: 0;
    top:10%;
}
.earlyTitle{
    width: 100%;
    height: 100%;
}
.index-lastBusStation{
    position: absolute;
    width: 100%;
    height: 70%;
    left: 0;
    bottom: 0;
}
.lastBusStation{
    width: 100%;
    height: 100%;
}
.index-bus{
    position: absolute;
    width: 60%;
    height: 30%;
    left: 0;
    bottom: 10%;
}
.bus{
    width: 100%;
    height: 100%;
}
.index-lastBusAvatar{
    width: 30%;
    height: 15%;
    position: absolute;
    bottom: 10%;
    right: 8%;
}
.lastBusAvatar{
    width: 100%;
    height: 100%;
}
.index-lastBusTitle{
    position: absolute;
    width: 30%;
    height: 5%;
    top:10%;
    left: 0;
}
.lastBusTitle{
    width: 100%;
    height: 100%;
}
.myTeamBg{
    position: absolute;
    width: 100%;
    height: 90%;
    top:0;
    left: 0;
}
.myTeamFoot{
    position: absolute;
    width: 100%;
    height: 10%;
    bottom:0;
    left: 0;
    background-color: #000;
}
.myTeamWall{
    position: absolute;
    width: 30%;
    height: 55%;
    bottom:0;
    right: 0;
}
.myTeamAvatar{
    position: absolute;
    width: 30%;
    height: 20%;
    top:23%;
    right: 5%;
}
.myTeamTxt{
    position: absolute;
    width: 13%;
    height: 3%;
    top:32%;
    left:15%;
}
.myTeamTxt01{
    position: absolute;
    width: 20%;
    height: 5%;
    top:36%;
    left:15%;
}
.myTeamTxt02{
    position: absolute;
    width: 20%;
    height: 5%;
    top:42%;
    left:15%;
}
.myTeamTxt03{
    position: absolute;
    width: 20%;
    height: 5%;
    top:48%;
    left:15%;
}
.myteamWhereTxt{
    width: 38%;
    height: 10%;
    position: absolute;
    left: 31%;
    bottom: 11%;
}
.index-fourth{
    position: relative;
    background-color: #302e5c;
}
.lightOffBg{
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    position: absolute;
}
.lightOff{
    width: 35%;
    height: 85%;
    left: 0;
    bottom: 0;
    position: absolute;
}
.cornerWall{
    width: 20%;
    height: 90%;
    right: 0;
    bottom: 0;
    position: absolute;
}
.cornerTitle{
    width: 53%;
    height: 9%;
    right: 0;
    top: 7%;
    position: absolute;
}
.index-clickGuide{
    width: 50%;
    height: 3%;
    position: absolute;
    left: 25%;
    top:29%;
}
.clickGuide{
    width: 100%;
    height: 100%;
}
.index-fourth-in{
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
}
.index-fourth-in-bg{
    width: 100%;
    height: 100%;
    background-color: #1a7fdc;
}
.lightOn{
    width: 35%;
    height: 85%;
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: 3;
}
.weKnowYou{
    width: 50%;
    height: 9%;
    left: 30%;
    top:25%;
    position: absolute;
    z-index: 3;
}
.lightOnBg{
    width: 100%;
    height: 100%;
    left: 0;
    top:10%;
    position: absolute;
    z-index: 1;
}
.lightOnFlowers{
    width: 25%;
    height: 13%;
    right: 5%;
    bottom: -1%;
    position: absolute;
    z-index: 3;
}

.index-fifth{
    background:url("cmbChina demo/images/aboutBg.jpg");
    background-size: cover;
    position: relative;
}
.index-footTa{
    position: absolute;
    width: 80%;
    height: 20%;
    left: 10%;
    top:60%;
}
.index-footTa .footTa{
    width:100%;
    height: 100%;
}
.footCity{
    position: absolute;
    width: 100%;
    height: 30%;
    top:0;
    z-index: 1;
}
.footAvatar{
    position: absolute;
    width: 70%;
    height: 35%;
    top:15%;
    left: 25%;
    z-index: 3;
}
.footTx{
    position: absolute;
    width: 50%;
    height: 15%;
    top:60%;
    left: 25%;
}
.index-sixth{
    background: url("cmbChina demo/images/runBg.jpg");
    background-size: cover;
    position: relative;
}
.index-runTa{
    position: absolute;
    width: 80%;
    height: 20%;
    left: 10%;
    top:50%;
}
.index-runTa .runTa{
    width:100%;
    height: 100%;
}

.runAvatar{
    position: absolute;
    width: 40%;
    height: 30%;
    top:10%;
    left: 15%;

}
.runTx{
    position: absolute;
    width: 50%;
    height: 15%;
    top:50%;
    left: 25%;
}
.index-seven{
    background-color: #4ADD9D;
    position: relative;
}
.index-salaryTa{
    position: absolute;
    width: 80%;
    height: 20%;
    left: 10%;
    top:60%;
}
.index-salaryTa .salaryTa{
    width:100%;
    height: 100%;
}
.salaryTx{
    position: absolute;
    width: 60%;
    height: 15%;
    top:60%;
    left: 20%
}
.salaryBg{
    position: absolute;
    width: 90%;
    height: 55%;
    top:5%;
    left: 5%;
}
.salaryAvatar{
    position: absolute;
    width: 46%;
    height: 35%;
    top:9%;
    left: 21%;
}
.index-eighth{
    background-color: #B5EFFD;
    position: relative;
}
.intro-txtContainer{
    width: 96%;
    height: 70%;
    left: 2%;
    top: 15%;
    background-color: #FC5955;
    border-radius: 10px;
    position: absolute;
    z-index: 2;
}
.introTxt{
    width: 94%;
    height: 90%;
    background-color: #EF3D38;
    top:3%;
    left: 3%;
    position: absolute;
    font-size: 18px;

}
.introTxt p{
    color: white;
    text-indent: 2em;
    padding: 0 5px;
    vertical-align: baseline;

}
.introTxt p:first-child{
    margin-top: 30px;
}
.introLogo{
    position: absolute;
    width: 50%;
    height: 8%;
    left: 25%;
    top:11%;
    z-index: 4;
}
.introFlowers{
    width:25% ;
    height: 10%;
    top:8%;
    left:3%;
    position: absolute;
    z-index: 1;
}
.introCloudy{
    width: 94%;
    height: 70%;
    left: 3%;
    top:12.8%;
    position: absolute;
    z-index: 5;
}
.introStar{
    position: absolute;
    width: 15%;
    height: 10%;
    right: 30%;
    bottom: 15%;
    z-index: 5;
}
.introAvatar{
    width: 34%;
    height: 24%;
    position: absolute;
    bottom:0;
    right: 0;
    z-index: 5;
}
.index-last{
    background: url("cmbChina demo/images/endBg.png") #3e88f1;
    background-size:100% 100%;
    position: relative;
}
.endLogo{
    position: absolute;
    width: 54%;
    height: 5%;
    left: 23%;
    top:10%;
}
.endTxt{
    position: absolute;
    width: 60%;
    height: 11%;
    left: 20%;
    top:22%;
}
.endMail{
    position: absolute;
    width: 60%;
    height: 5%;
    left: 20%;
    top:36%;
}
.endClickGuide{
    position: absolute;
    width: 36%;
    height: 3%;
    left: 32%;
    top:48%;
}
.endBottomTxt{
    position: absolute;
    width: 44%;
    height: 4%;
    left: 28%;
    bottom:2%;
}
.index-endAvatar{
    position: absolute;
    width: 60%;
    height: 20%;
    left: 20%;
    top:57%;
}
.endAvatar{
    width: 100%;
    height: 100%;
}
.index-endCloudys{
    position: absolute;
    width: 90%;
    height: 75%;
    left: 5%;
    top:10%;
}
.endCloudys{
    width: 100%;
    height: 100%;
}
.music{
    position: absolute;
    width:15%;
    height: 8%;
    top:3%;
    right: 1%;
    z-index:10;
}
.music img{
    width: 100%;
    height: 100%;
}

index.js代码：

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: false,

    // 如果需要分页器
    pagination: '.swiper-pagination',
    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper); //隐藏动画元素
        swiperAnimate(swiper); //初始化完成开始动画
    },
    onSlideChangeEnd: function(swiper){
        swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
    }

});

app.js代码：

function controlLight() {
    var isOpen=true;
    document.querySelector(".lightOff").onclick=function () {

        document.querySelector(".index-fourth-out").style.display="none";
        document.querySelector(".index-fourth-in").style.display="block";
    };
    document.querySelector(".music").onclick=function () {
        isOpen=!isOpen;
        if(isOpen===true){
           document.querySelector(".musicImg").src="cmbChina%20demo/images/musicBtnOff.png";
           document.querySelector(".audio").pause();
        }else {
            document.querySelector(".musicImg").src="cmbChina%20demo/images/musicBtn.png";
            document.querySelector(".audio").play();
        }
    }
}
controlLight();