<!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 Swiper's CSS -->??? <link rel="stylesheet" href="css/swiper.min.css">?? ? <link rel="stylesheet" href="css/animate.min.css">??? <!-- Demo styles -->??? <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>??? <!-- Swiper -->??? <div>??????? <div>??????????? <div class="swiper-slide bg1">?????????? ??? ?<p swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.3s">格潤物聯(lián)，開創(chuàng)企業(yè)美好未來！</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">居民健康卡，實現(xiàn)醫(yī)療行業(yè)的服務(wù)創(chuàng)新</p>??????????? </div>??????????? <div class="swiper-slide bg3">核心數(shù)據(jù)災(zāi)備中心，開創(chuàng)人防工程平戰(zhàn)結(jié)合應(yīng)用新模式</div>??????????? <div class="swiper-slide bg4">智能維保，為您提供7*24小時的貼心保障</div>?????????? ???????? </div>??????? <!-- Add Pagination -->??????? <div></div>??? </div>??? <!-- Swiper JS -->??? <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>??????? <!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用 -->??????? <script src="js/bootstrap.min.js"></script> ??? <!-- Initialize Swiper -->??? <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切換結(jié)束時也運行當(dāng)前slide動畫? } ? })?????? ???? </script></body></html>文字部分不能轉(zhuǎn)行并且其他頁加annimate動畫文字不顯示，而且沒有動畫
添加回答
舉報
0/150
提交
取消