留个swiper大神

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    
    <link rel="stylesheet" href="css/swiper.min.css">
   <link rel="stylesheet" href="css/animate.min.css">
    
    <style>
    li{
       list-style: none;
       float: left;
    }
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#fff;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .bg1{
       background: url(images/20160805095146_816.png) no-repeat center center;
    }
    .bg2{
       background: url(images/20160805095101_656.png) no-repeat center center;
    }
    .bg3{
       background: url(images/20160805094724_104.png) no-repeat center center;
    }
    .bg4{
       background: url(images/20160805094800_322.png) no-repeat center center;
    }
    </style>
</head>
<body>
    
    <div>
        <div>
            <div class="swiper-slide bg1">
               <p swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.3s">格润物联，开创企业美好未来！</p>
               <ul>
                   <li><a href=""><img src="images/bnt_qq.png" alt="qq" title="qq"/></a></li>
                   <li><a href=""><img src="images/bnt_weixin.png" alt="qq" title="qq"/></a></li>
                   <li><a href=""><img src="images/bnt_weibo.png" alt="qq" title="qq"/></a></li>
                   <li><a href=""><img src="images/bnt_renren.png" alt="qq" title="qq"/></a></li>
                   <li><a href=""><img src="images/bnt_dou.png" alt="qq" title="qq"/></a></li>
               </ul>
            </div>
            <div class="swiper-slide bg2">
               <p swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.3s">居民健康卡，实现医疗行业的服务创新</p>
            </div>
            <div class="swiper-slide bg3">核心数据灾备中心，开创人防工程平战结合应用新模式</div>
            <div class="swiper-slide bg4">智能维保，为您提供7*24小时的贴心保障</div>

        </div>
        
        <div></div>
    </div>

    
    <script src="js/swiper.min.js"></script>
   <script src="js/swiper.animate1.0.2.min.js"></script>
   <script src="js/jquery-1.11.1.min.js"></script>
        
        <script src="js/bootstrap.min.js"></script>
    
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,


    });
     var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素
    swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
    </script>
</body>
</html>

文字部分不能转行并且其他页加annimate动画文字不显示，而且没有动画

kathria

浏览 1437回答 1

1回答

随时随地看视频慕课网APP