Prechádzať zdrojové kódy

首页楼层轮播图指示点bug修改

yuwenjun1997 2 rokov pred
rodič
commit
2b967944e4

+ 32 - 15
src/main/resources/static/js/index.js

@@ -172,26 +172,43 @@ var homeData = new Vue({
                 }
             }
         },
+        // 初始化普通轮播图
+        initSimpleSwiper: function(){
+            $('.recommendBox-wrapper').each(function(index, el){
+                var cell = $(el).parents('.swiper-container-floor').find('.swiper-pagination')
+                // var cell = $(".swiper-pagination-floor");
+                var size = Math.ceil(cell.attr("data-id")/5);
+                var span = '';
+                for (var i = 0; i < size; i++) {
+                    span += '<span></span>';
+                }
+                cell.html(span);
+
+                $('.mySwiperSlide').slide({
+                    mainCell:".recommendBox-wrapper",
+                    titCell:".swiper-pagination span",
+                    effect: "leftLoop",
+                    autoPlay: false,
+                    scroll:5,
+                    vis:5
+                });
+            })
+        },
         // 商品楼层轮播
         swiperFloor: function(){
+            var self = this;
             setTimeout(function(){
                 // 商品轮播
                 if (isPC) {
-                    var cell = $(".swiper-pagination-floor");
-                    var size = Math.ceil(cell.attr("data-id")/5);
-                    var span = '';
-                    for (var i = 0; i < size; i++) {
-                        span += '<span></span>';
-                    }
-                    cell.html(span);
-                    $('.mySwiperSlide').slide({
-                        mainCell:".recommendBox-wrapper",
-                        titCell:".swiper-pagination span",
-                        effect: "leftLoop",
-                        autoPlay: false,
-                        scroll:5,
-                        vis:5
-                    });
+                    self.initSimpleSwiper();
+                    // var cell = $(".swiper-pagination-floor");
+                    // var size = Math.ceil(cell.attr("data-id")/5);
+                    // var span = '';
+                    // for (var i = 0; i < size; i++) {
+                    //     span += '<span></span>';
+                    // }
+                    // cell.html(span);
+
                     var swiper = new Swiper(".mySwiper", {
                         slidesPerView: 5,
                         spaceBetween: 13,

+ 2 - 2
src/main/resources/templates/index.html

@@ -141,7 +141,7 @@
                             <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
                         </div>
                         <div class="swiper-container-floor hotList mySwiper" id="recommendBox">
-                            <div class="swiper-wrapper section_page_main type_08 recommendBox-wrapper recommendBox-wrapperHot clear mfw section_8 max">
+                            <div class="swiper-wrapper section_page_main type_08  recommendBox-wrapperHot clear mfw section_8 max">
                                 <!-- 商品/图片 列表 -->
                                 <a :href="'/product-'+pros.product.productId+'.html'" class="swiper-slide page_main_item hot ad_04" target="_blank" v-for="pros in floor.floorImageList4">
                                     <img class="page_main_image" src="/img/base/placeholder.png" :data-original="pros.product.image" :alt="pros.product && pros.product.name">
@@ -388,7 +388,7 @@
                             <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
                         </div>
                         <div class="hotList swiper-container-floor mySwiper" id="recommendBox">
-                            <div class="section_page_main type_08 swiper-wrapper recommendBox-wrapper recommendBox-wrapperHot clear mfw section_8">
+                            <div class="section_page_main type_08 swiper-wrapper  recommendBox-wrapperHot clear mfw section_8">
                                 <!-- 商品/图片 列表 -->
                                 <th:block th:each="pros : ${floor.get('floorImageList4')}"  th:object="${pros}">
                                     <a th:href="*{link}" class="swiper-slide page_main_item hot ad_04" target="_blank">