cf十周年js修改

2018专题/CF十周年/src/_index.html

@@ -234,25 +234,42 @@
         <div class="mod-tidbit" id="tidbit">
             <div class="g-zt-inner">
                 <h2 class="mod-title mod-title6">预约即得永久全新手雷及稀有名片</h2>
-                <div class="mod-hd">
+                <div class="mod-hd" data-role="carousel">
                     <div class="bigimg-wrap">
                         <ul>
                             <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
+                            <li><img src="/src/img/tidbit-bigimg1.jpg" alt="" /></li>
                         </ul>
                     </div>
                     <div class="smallimg-wrap">
                         <div class="smallimg-main">
-                            <ul>
+                            <ul data-switchable-role="content">
                                 <li class="is-active"><img src="/src/img/tidbit-smallimg1.jpg" alt="" /></li>
                                 <li><img src="/src/img/tidbit-smallimg2.jpg" alt="" /></li>
                                 <li><img src="/src/img/tidbit-smallimg3.jpg" alt="" /></li>
                                 <li><img src="/src/img/tidbit-smallimg4.jpg" alt="" /></li>
                                 <li><img src="/src/img/tidbit-smallimg5.jpg" alt="" /></li>
                                 <li><img src="/src/img/tidbit-smallimg6.jpg" alt="" /></li>
+                                <li><img src="/src/img/tidbit-smallimg6.jpg" alt="" /></li>
+                                <li><img src="/src/img/tidbit-smallimg6.jpg" alt="" /></li>
+                                <li><img src="/src/img/tidbit-smallimg6.jpg" alt="" /></li>
+                                <li><img src="/src/img/tidbit-smallimg6.jpg" alt="" /></li>
+                                <li><img src="/src/img/tidbit-smallimg6.jpg" alt="" /></li>
+                                <li><img src="/src/img/tidbit-smallimg6.jpg" alt="" /></li>
                             </ul>
                         </div>
-                        <a href="javascript:;" class="btn prev is-disabled"></a>
-                        <a href="javascript:;" class="btn next"></a>
+                        <a href="javascript:;" class="btn prev is-disabled" data-switchable-role="prev"></a>
+                        <a href="javascript:;" class="btn next" data-switchable-role="next"></a>
                     </div>
                 </div>
             </div>

2018专题/CF十周年/src/modules/page/index.js

@@ -2,6 +2,34 @@ var seaLoader = require('seaLoader');
 var dialog = require('dialog.js');
 require('jquery.gallery.js');
 
+seaLoader(function (seajs) {
+    seajs.use(['arale/qrcode/1.0.3/qrcode','arale/switchable/1.0.2/carousel'], function (QrcodeTool,Carousel) {
+        Qrcode = QrcodeTool;
+
+        $('[data-role="carousel"]').each(function(index,ele){
+            var biglilen = $('.bigimg-wrap li').length;
+            $(ele).addClass('carousel'+ index);
+            $('.bigimg-wrap ul').css('width',biglilen*970);
+            var smallimg = new Carousel({
+                element: '.carousel' + index,
+                classPrefix: null,
+                disabledBtnClass: 'is-disabled',
+                hasTriggers: false, //隐藏触发器
+                viewSize: [978],
+                effect: 'scrollx',
+                step: 6,
+                circular: false, 
+                autoplay: false,
+                duration: 350
+            }).render();
+            $('.smallimg-wrap li').click(function() {
+                $(this).addClass('is-active').siblings().removeClass('is-active');
+                $('.bigimg-wrap ul').stop().animate({'left':-$(this).index()*970});
+            });
+        })
+    });
+});
+
 $(function(){
     $(".icon-play").click(function () {
         $(this).parent().hide().siblings().show();

2018专题/CF十周年/src/sass/global.scss

@@ -555,4 +555,17 @@ body {
             }
         }
     }
+}
+
+// H5适配
+@media screen and (max-width: 640px) {
+    html,body {
+        max-width: 640px;
+    }
+    .g-zt-nav {
+        display: none;
+    }
+    .mod-primary {
+        background-size: 150% auto;
+    }
 }