slide.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>title</title>
  8. <link rel="stylesheet" type="text/css" href="css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
  10. <style>
  11. html, body{
  12. height:100%;box-sizing:border-box;background:#ffffff;
  13. }
  14. .swiper-container {
  15. width: 100%;
  16. height: 100%;
  17. transform:translate3d(0,0,0);
  18. overflow:hidden;
  19. }
  20. .swiper-slide {
  21. text-align: center;
  22. font-size: 18px;
  23. background: #ffffff;
  24. height:100%;
  25. position: relative;
  26. width: 100%;
  27. }
  28. .swiper-slide .img{
  29. width: 100%;
  30. height: 100%;
  31. background-repeat: no-repeat;
  32. background-size:cover;
  33. background-position: center;
  34. transform:translate3d(0,0,0)
  35. }
  36. .swiper-container-free-mode > .swiper-wrapper {
  37. -webkit-transition-timing-function: linear; /*之前是ease-out*/
  38. -moz-transition-timing-function: linear;
  39. -ms-transition-timing-function: linear;
  40. -o-transition-timing-function: linear;
  41. transition-timing-function: linear;
  42. margin: 0 auto;
  43. transform:translate3d(0,0,0)
  44. }
  45. .swiper-pagination-bullet {
  46. opacity: .8;
  47. }
  48. .swiper-pagination-bullet-active {
  49. background: #d9251c;
  50. }
  51. </style>
  52. <script>
  53. (function(w, d, m) {
  54. function r() {
  55. var t = 100,
  56. o = 750,
  57. e = d.documentElement.clientWidth || w.innerWidth,
  58. n = m.max(m.min(e, 480), 320),
  59. h = 50;
  60. 320 >= n && (h = m.floor(n / o * t * .99)),
  61. n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
  62. n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
  63. n > 375 && (h = m.floor(n / o * t * .97)),
  64. d.querySelector("html").style.fontSize = h + "px"
  65. };
  66. r();
  67. w.onresize = function() {
  68. r()
  69. }
  70. })(window, document, Math);
  71. </script>
  72. </head>
  73. <body>
  74. <div class="swiper-container">
  75. <div class="swiper-wrapper">
  76. </div>
  77. <div class="swiper-pagination" style="font-size: 0;bottom: 22px;"></div>
  78. </div>
  79. </body>
  80. <script type="text/javascript" src="script/api.js"></script>
  81. <script type="text/javascript" src="script/swiper.min.js"></script>
  82. <script type="text/javascript" src="script/jquery.min.js"></script>
  83. <script type="text/javascript" src="script/jquery.tap.js"></script>
  84. <script type="text/javascript">
  85. apiready = function() {
  86. getRouteData();
  87. api.addEventListener({
  88. name: 'keyback'
  89. }, function(ret, err) {
  90. api.toast({
  91. msg: '再按一次返回键退出' + api.appName,
  92. duration: 2000,
  93. location: 'bottom'
  94. });
  95. });
  96. };
  97. $(".swiper-wrapper").on("tap", "#go-to", function() {
  98. api.openWin({
  99. name: 'index',
  100. url: 'index.html',
  101. bounces: false
  102. })
  103. $api.setStorage("isSlide", "1");
  104. // setTimeout("api.closeWin();", 500);
  105. api.closeWin();
  106. return false;
  107. })
  108. function getRouteData() {
  109. $.ajax({
  110. url: siteurl + 'v2/entry/siteConfig',//'?do=getslide',
  111. data: {},
  112. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  113. dataType: 'json',
  114. type: 'post',
  115. success: function(datas) {
  116. if (datas.result) {
  117. $.each(datas.data.slide, function(index, item) {
  118. if (index == (datas.data.slide.length-1)) {
  119. $(".swiper-wrapper").append(`
  120. <div class="swiper-slide" id="go-to">
  121. <div class="img" style="background-image: url(${siteurl}uploads/home/adv/${item.adv_code})"></div>
  122. </div>`);
  123. } else {
  124. $(".swiper-wrapper").append(`
  125. <div class="swiper-slide">
  126. <div class="img" style="background-image: url(${siteurl}uploads/home/adv/${item.adv_code})"></div>
  127. </div>`);
  128. }
  129. });
  130. var swiper = new Swiper('.swiper-container', {
  131. allowSlidePrev: true,
  132. pagination: {
  133. el: '.swiper-pagination',
  134. },
  135. });
  136. } else {
  137. errcode(datas, datas.code);
  138. }
  139. },
  140. error:function(err){
  141. console.log(JSON.stringify(err));
  142. }
  143. });
  144. }
  145. </script>
  146. </html>