瀏覽代碼

解决广告图适配问题

git-svn-id: svn://svn7.apicloud.com/A6007457911931/%E5%9C%88%E5%A4%9A%E5%A4%9A@667 0e1a2743-8d03-4e5a-a60c-7e26af42b145
1149931599@qq.com 4 年之前
父節點
當前提交
fa03506114
共有 3 個文件被更改,包括 20 次插入8 次删除
  1. 二進制
      image/1.png
  2. 二進制
      image/2.png
  3. 20 8
      slide.html

二進制
image/1.png


二進制
image/2.png


+ 20 - 8
slide.html

@@ -12,6 +12,9 @@
         html, body{
     	   height:100%;box-sizing:border-box;background:#ffffff;
     	}
+		.swiper-wrapper{
+			background-color: #0D0D0D;
+		}
 	    .swiper-container {
 	      width: 100%;
 	      height: 100%;
@@ -22,13 +25,14 @@
 	      background: #ffffff;
 	      height:100%;
 	      position: relative;
+		  width: 100%;
 	    }
-	    .swiper-slide img{
-	      width:100%;
-	      display: block;
-	      position: absolute;
-	      /*left:50%;top:50%;*/
-	      /*transform: translate(-50%,-50%);*/
+	    .swiper-slide .img{
+		  width: 100%;	
+		  height: 100%;
+		  background-repeat: no-repeat;
+		  background-size:cover;
+		  background-position: center;
 	    }
         .swiper-pagination-bullet {
             opacity: .8;
@@ -70,6 +74,12 @@
 <script type="text/javascript" src="script/jquery.min.js"></script>
 <script type="text/javascript" src="script/jquery.tap.js"></script>
 <script type="text/javascript">
+	var swiper = new Swiper('.swiper-container', {
+	    allowSlidePrev: true,
+	    pagination: {
+	        el: '.swiper-pagination',
+	    },
+	});
 apiready = function() {
     getRouteData();
     api.addEventListener({
@@ -107,9 +117,11 @@ function getRouteData() {
             if (datas.result) {
                 $.each(datas.data.slide, function(index, item) {
                     if (index == (datas.data.slide.length-1)) {
-                        $(".swiper-wrapper").append('<div class="swiper-slide" id="go-to"><img src="' + siteurl + "uploads/home/adv/" + item.adv_code + '"/></div>');
+                        <!-- $(".swiper-wrapper").append('<div class="swiper-slide" id="go-to"><img src="' + siteurl + "uploads/home/adv/" + item.adv_code + '"/></div>'); -->
+						$(".swiper-wrapper").append('<div class="swiper-slide" id="go-to"><div class="img" style="background-image: url(' + siteurl + "uploads/home/adv/" + item.adv_code + ')"></div></div>');
                     } else {
-                        $(".swiper-wrapper").append('<div class="swiper-slide"><img src="' + siteurl + "uploads/home/adv/" + item.adv_code + '"/></div>');
+						$(".swiper-wrapper").append('<div class="swiper-slide"><div class="img" style="background-image: url(' + siteurl + "uploads/home/adv/" + item.adv_code + ')"></div></div>');
+                        // $(".swiper-wrapper").append('<div class="swiper-slide"><img src="' + siteurl + "uploads/home/adv/" + item.adv_code + '"/></div>');
                     }
                 });
                 var swiper = new Swiper('.swiper-container', {