chenzhiguang vor 4 Jahren
Ursprung
Commit
717d40bf74
4 geänderte Dateien mit 77 neuen und 3 gelöschten Zeilen
  1. 4 0
      index.html
  2. 30 0
      static/css/app.css
  3. 42 2
      static/js/app.js
  4. 1 1
      static/js/config.js

+ 4 - 0
index.html

@@ -50,6 +50,10 @@
         <div data-msg="8" class="swiper-slide style-8"></div>
         <div data-msg="9" class="swiper-slide style-9"></div>
         <div data-msg="10" class="swiper-slide style-10"></div>
+        <div data-msg="11" class="swiper-slide style-11"></div>
+        <div data-msg="12" class="swiper-slide style-12"></div>
+        <div data-msg="13" class="swiper-slide style-13"></div>
+        <div data-msg="14" class="swiper-slide style-14"></div>
       </div>
     </div>
   </div>

+ 30 - 0
static/css/app.css

@@ -440,6 +440,12 @@ body {
 .app-switch .stl-swiper .style-10.active {
   background-image: url("../images/styles/10-active.png");
 }
+.app-switch .stl-swiper .style-11 {
+  background-image: url("../images/styles/11.png");
+}
+.app-switch .stl-swiper .style-11.active {
+  background-image: url("../images/styles/11-active.png");
+}
 
 
 
@@ -504,6 +510,30 @@ body {
 .app-switch .stl-swiper1 .style-10.active {
   background-image: url("../images/styles1/10-active.png");
 }
+.app-switch .stl-swiper1 .style-11 {
+  background-image: url("../images/styles1/11.png");
+}
+.app-switch .stl-swiper1 .style-11.active {
+  background-image: url("../images/styles1/11-active.png");
+}
+.app-switch .stl-swiper1 .style-12 {
+  background-image: url("../images/styles1/12.png");
+}
+.app-switch .stl-swiper1 .style-12.active {
+  background-image: url("../images/styles1/12-active.png");
+}
+.app-switch .stl-swiper1 .style-13 {
+  background-image: url("../images/styles1/13.png");
+}
+.app-switch .stl-swiper1 .style-13.active {
+  background-image: url("../images/styles1/13-active.png");
+}
+.app-switch .stl-swiper1 .style-14 {
+  background-image: url("../images/styles1/14.png");
+}
+.app-switch .stl-swiper1 .style-14.active {
+  background-image: url("../images/styles1/14-active.png");
+}
 
 
 .my-pic-list {

+ 42 - 2
static/js/app.js

@@ -78,7 +78,46 @@ var app = {
      */
     stlSwiper: function () {
         var $elem = $('.stl-swiper')
-        new Swiper($elem[0], {
+        if (this.stlSwiper.swiper) {
+            this.stlSwiper.swiper.destroy()
+        }
+
+        let html = ''
+
+        if (self.type==2) {
+            html = `<div class="swiper-wrapper">
+                <div data-msg="1" class="swiper-slide style-1"></div>
+                <div data-msg="2" class="swiper-slide style-2"></div>
+                <div data-msg="3" class="swiper-slide style-3"></div>
+                <div data-msg="4" class="swiper-slide style-4"></div>
+                <div data-msg="5" class="swiper-slide style-5"></div>
+                <div data-msg="6" class="swiper-slide style-6"></div>
+                <div data-msg="7" class="swiper-slide style-7"></div>
+                <div data-msg="8" class="swiper-slide style-8"></div>
+                <div data-msg="9" class="swiper-slide style-9"></div>
+                <div data-msg="10" class="swiper-slide style-10"></div>
+                <div data-msg="11" class="swiper-slide style-11"></div>
+                <div data-msg="12" class="swiper-slide style-12"></div>
+                <div data-msg="13" class="swiper-slide style-13"></div>
+                <div data-msg="14" class="swiper-slide style-14"></div>
+            </div>`
+        } else{
+            html = `<div class="swiper-wrapper">
+                <div data-msg="1" class="swiper-slide style-1"></div>
+                <div data-msg="2" class="swiper-slide style-2"></div>
+                <div data-msg="3" class="swiper-slide style-3"></div>
+                <div data-msg="4" class="swiper-slide style-4"></div>
+                <div data-msg="5" class="swiper-slide style-5"></div>
+                <div data-msg="6" class="swiper-slide style-6"></div>
+                <div data-msg="7" class="swiper-slide style-7"></div>
+                <div data-msg="8" class="swiper-slide style-8"></div>
+                <div data-msg="9" class="swiper-slide style-9"></div>
+                <div data-msg="10" class="swiper-slide style-10"></div>
+                <div data-msg="11" class="swiper-slide style-11"></div>
+            </div>`
+        }
+        $elem.html(html)
+        this.stlSwiper.swiper = new Swiper($elem[0], {
             //speed: 300,
             freeMode: true,
             slidesPerView: 3.5,
@@ -178,9 +217,10 @@ var app = {
         $('.swt-style').on('click','a', function (event) {
             self.type = $(event.currentTarget).data('id')
             $(event.currentTarget).addClass("active").siblings().removeClass("active");
+            self.stlSwiper()
             if (self.type==2) {
                 $('.stl-swiper').addClass('stl-swiper1')
-            }else{
+            }else {
                 $('.stl-swiper').removeClass('stl-swiper1')
             }
             $('.swiper-wrapper').find('.swiper-slide').removeClass('active');

+ 1 - 1
static/js/config.js

@@ -6,7 +6,7 @@ window.__config = {
     /**
      * 静态资源地址
      */
-    staticUrl: "http://ost.4dage.com/art/artHYC/static",
+    staticUrl: "",
     /**
      * 使用超时时间180s
      */