<!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">格潤物聯，開創企業美好未來！</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>??????? <!-- 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插件或者可以根據需要使用的js插件調用 -->??????? <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切換結束時也運行當前slide動畫? } ? })?????? ???? </script></body></html>文字部分不能轉行并且其他頁加annimate動畫文字不顯示，而且沒有動畫
1 回答
- 1 回答
- 0 關注
- 1462 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消