jQuery：html 没有显示任何错误，也许是 head 错误？答案

【问题标题】：jQuery: html shows nothing with no error, maybe head error?jQuery：html 没有显示任何错误，也许是 head 错误？
【发布时间】：2023-02-08 14:21:56
【问题描述】：

抱歉英语不好，这是我的第二语言。

我正在尝试修复使用 jQuery 的 codepen 中的代码。这是一个自动滑动的轮播代码。但是，当我尝试将这些代码移动到我自己的文件时，我的 html 没有显示轮播。控制台日志没有错误。这是我的 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>

这是我尝试使用的 javascript 文件 (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();
  });

这是代码笔： https://codepen.io/fixcl/pen/KwpKvb

我添加了错误版本的js文件吗？还是我错过了其他东西？

编辑： main.js 连接到 html 文件。我可以检查 main.js 中的代码

console.log($current);

Edited2：这是我的 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>

【问题讨论】：

尝试放入 console.log('this works') js 文件。如果在控制台中显示单词 js 就好了，如果不是，也许你没有调用 js 文件
@Japs 如果你看到 main.js，它有代码 console.log($current); 它在控制台上保持显示 0，这意味着 main.js 在 html 中
你的 html 正文中有什么内容？
css 也正确链接了吗？
@huanfeng 我刚刚添加到问题中，请查看

标签： javascript html jquery css

【解决方案1】：

你应该把 main.js 放在 body 关闭标签之前

<body>
...
<script src="main.js"></script>
</body>

【讨论】：