<!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 关注
- 1430 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消