jQuery自动轮播迁移本地后无显示无报错问题排查

将Codepen上的一款jQuery自动轮播组件迁移到本地后，页面无法显示轮播内容，控制台无报错，已验证main.js可正常加载（通过console.log($current)确认）。相关代码如下：

HTML头部代码 #

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
    <script src="main.js"></script>
</head>

HTML主体代码 #

<body>
<div class="slider--teams">
    <div class="slider--teams__team">
      <ul id="list" class="cf">
        <li>
          <figure class="active">
            <figcaption>
              <img src="https://odium.kr/assets/css/images/symbol-cernium.png">
              <h2>Billie</h2>
              <p>Head of Team</p>
            </figcaption>
          </figure>
        </li>

        <li>
          <figure>
            <figcaption>
              <img src="https://odium.kr/assets/css/images/symbol-arcus.png">
              <h2>Roger</h2>
              <p>Art Director</p>
            </figcaption>
          </figure>
        </li>

        <li>
          <figure>
            <figcaption>
              <img src="https://odium.kr/assets/css/images/symbol-odium.png">
              <h2>Wendy</h2>
              <p>Designer</p>
            </figcaption>
          </figure>
        </li>  
      </ul>
    </div>
  </div>
</body>

main.js代码 #

var sliderTeam = (function(document, $) {
  
    'use strict';
    
    var $sliderTeams = $('.slider--teams'),
        $list = $('#list'),
        $listItems = $('#list li'),
        $nItems = $listItems.length,
        $nView = 3,
        autoSlider,
        $current = 0,
        $isAuto = true,
        $acAuto = 2500,
        
        _init = function() {
          _initWidth();
          _eventInit();
        },
        
        _initWidth = function() {
          $list.css({
            'margin-left': ~~(100 / $nView) + '%',
            'width': ~~(100 * ($nItems / $nView)) + '%'
          });
          $listItems.css('width', 100 / $nItems + '%');
          $sliderTeams.velocity({ opacity: 1 }, { display: "block" }, { delay:1000 });
        },
        
        _eventInit = function() {
          
          window.requestAnimFrame = (function() {
            return  window.requestAnimationFrame       || 
                window.webkitRequestAnimationFrame || 
                window.mozRequestAnimationFrame    || 
                window.oRequestAnimationFrame      || 
                window.msRequestAnimationFrame     || 
                function(callback, element){
                  window.setTimeout(callback, 1000 / 60);
                };
          })();
  
          window.requestInterval = function(fn, delay) {
              if( !window.requestAnimationFrame       && 
                  !window.webkitRequestAnimationFrame && 
                  !window.mozRequestAnimationFrame    && 
                  !window.oRequestAnimationFrame      && 
                  !window.msRequestAnimationFrame)
                      return window.setInterval(fn, delay);
              var start = new Date().getTime(),
              handle = new Object();
  
              function loop() {
                  var current = new Date().getTime(),
                  delta = current - start;
                  if(delta >= delay) {
                      fn.call();
                      start = new Date().getTime();
                  }
                  handle.value = requestAnimFrame(loop);
              };
              handle.value = requestAnimFrame(loop);
              return handle;
          }
  
          window.clearRequestInterval = function(handle) {
              window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
              window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value)   :
              window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
              window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
              window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
              clearInterval(handle);
          };
          
          $.each($listItems, function(i) {
            var $this = $(this);
            $this.on('touchstart click', function(e) {
              e.preventDefault();
              _stopMove(i);
              _moveIt($this, i);
            });
          });
          
          autoSlider = requestInterval(_autoMove, $acAuto);
        },
        
        _moveIt = function(obj, x) {
          
          var n = x;
          
          obj.find('figure').addClass('active');        
          $listItems.not(obj).find('figure').removeClass('active');
          
          $list.velocity({
            translateX: ~~((-(100 / $nItems)) * n) + '%',
            translateZ: 0
          }, {
            duration: 1000,
            easing: [400, 26],
            queue: false
          });
          
        },
        
        _autoMove = function(currentSlide) {
          if ($isAuto) { 
            $current = ~~(($current + 1) % $nItems);
          } else {
            $current = currentSlide;
          }
          console.log($current);
          _moveIt($listItems.eq($current), $current);
        },
        
        _stopMove = function(x) {
          clearRequestInterval(autoSlider);
          $isAuto = false;
          _autoMove(x);
        };
    
    return {
      init: _init
    };
  
  })(document, jQuery);
  
  $(window).load(function(){
    'use strict';
    sliderTeam.init();
  });

1. 缺失核心CSS样式 #

原Codepen的轮播依赖特定布局样式，本地main.css未同步这些样式，导致元素无法正常渲染。需添加以下代码到main.css：

/* 清除浮动类 */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

/* 轮播容器基础样式 */
.slider--teams {
    opacity: 0;
    display: none;
    overflow: hidden;
    width: 100%;
}

.slider--teams__team {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* 列表项布局 */
#list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

#list li {
    float: left;
    position: relative;
}

/* 内容样式 */
#list figure {
    margin: 0;
    padding: 0;
    text-align: center;
}

#list figcaption {
    padding: 1em;
}

#list img {
    display: inline-block;
    max-width: 100px;
    height: auto;
}

2. jQuery引入协议问题 #

本地用file://协议打开页面时，//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js会以file://协议加载，导致失败。需修改为HTTPS协议：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

3. Velocity.js调用参数错误 #

_initWidth方法中Velocity的调用格式错误，Velocity仅接受两个参数（属性对象、配置对象），需合并配置项：

// 原代码
$sliderTeams.velocity({ opacity: 1 }, { display: "block" }, { delay:1000 });

// 修改后
$sliderTeams.velocity({ opacity: 1 }, { display: "block", delay: 1000 });

4. 补充说明 #

• 若仍无法显示，可检查浏览器控制台的网络请求，确认图片、CSS、JS资源是否加载成功；
• 原Codepen中可能包含额外的全局样式（如* { box-sizing: border-box; }），建议添加到main.css以保证布局一致性。

内容的提问来源于stack exchange，提问作者mmd