javascript - Codepen Carousel 无法正常显示或运行？

Question

一直在与一位同事合作从 Codepen 添加轮播。我们已经相应地插入了 HTML 和 CSS，还在 HTML 的标签中添加了 JavaScript……但是它不起作用。

Here's the site in question - 那些 363x3673 图像应该以 3D 桶状形状显示。这是来自 the Codepen 的原始代码:

HTML

<div id="carousel">
<figure id="spinner">
<figure>
  <img src="//placehold.it/363x363" alt="">
    <figcaption>1</figcaption>
</figure>
<figure>
  <img src="//placehold.it/363x363" alt="">
    <figcaption>11</figcaption>
</figure>
<figure>
  <img src="//placehold.it/363x363" alt="">
    <figcaption>21</figcaption>
  </figure>
   <figure>
     <img src="//placehold.it/363x363" alt="">
<figcaption>1211</figcaption>
</figure>
<figure>
  <img src="//placehold.it/363x363" alt="">
<figcaption>111221</figcaption>
</figure>
<figure>
  <img src="//placehold.it/363x363" alt="">
<figcaption>312211</figcaption>
</figure>
  <figure>
    <img src="//placehold.it/363x363" alt="">
<figcaption>12112221</figcaption>
</figure>
</div>
<span style=float:left class=ss-icon onclick="galleryspin('-')">&lt;</span>
<span style=float:right class=ss-icon onclick="galleryspin('')">&gt;</span>

CSS

* { box-sizing: border-box; }
body {  background: #100000; font-family: Avenir, sans-serif; color: #fff; }
p { margin-top: 8rem; font-size: 1rem; color: #777; } 

div#carousel { 
  perspective: 1200px; 
  background: #100000; 
  padding-top: 5%; 
  font-size:0; 
  margin-bottom: 3rem; 
}
figure#spinner { 
  transform-style: preserve-3d; 
  height: 300px; 
  transform-origin: 50% 50% -400px; 
  transition: 1s; 
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ(-25px);
  -webkit-transform-origin: center center; 
} 
figure#spinner figure { 
  width: 20%; max-width: 500px; 
  position: absolute; left: 40%;
  transform-origin: 50% 50% -400px;
  outline:1px solid transparent; 
  overflow: hidden;
  transition: 1s;
}

figure#spinner figure.focus { width: 26%; left: 37%; margin-top: -3rem; } 
figure#spinner figure img { width: 100%; } 
figcaption { position: absolute; top: 100%; width: 100%; padding: .3rem; z-index: 2; font-size: 1.1rem; background: rgba(0, 0, 0, 0); transition: .6s; }

figure#spinner figure.current:hover figcaption,
figure#spinner figure.current.caption figcaption
{ top: 90%; background: rgba(0, 0, 0, 0.5); bottom: 0; } 


div#carousel ~ span { 
  color: #fff; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 2rem; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -6rem; 
  border-bottom: none; 
  line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }

JS

    var spinner = document.querySelector("#spinner");
var angle = 0;
var numpics = $('figure#spinner figure').length;
degInt = 360 / numpics;
var start = 0;
var current = 1;

$(document).ready(function() {

  $('figure#spinner figure').each(function() { 
     $(this).css('-webkit-transform','rotateY(-'+start+'deg) translateZ(-25px)');
     $(this).css('transform', 'rotateY(-'+start+'deg)');
    start = start + degInt;
  });
 });

function setCurrent(current) { 
  $('figure#spinner figure:nth-child('+current+')').addClass('current'); 
// alert(current);
}

function galleryspin(sign) { 

$('figure#spinner figure').removeClass('current focus caption'); 

if (!sign) { angle = angle + degInt; 
           current = (current+1);
            if (current > numpics) { current = 1; }
           } else { 
            angle = angle - degInt; 
            current = current - 1;
            if (current == 0) { current = numpics; } 
           }

spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg) translateZ(-25px); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg)");
  setCurrent(current);
}

$("figure#spinner figure").click(function() {
  if ($(this).hasClass('current')) {
      $(this).toggleClass("focus");
  }
});

setCurrent(1);

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left cursor
        galleryspin('-');
        break;

        case 39: // right cursor
        galleryspin('');
        break;

        case 90: // Z - zoom image in current image
        $('figure#spinner figure.current').toggleClass('focus');
        break;

        case 67: // C - show caption for current image
        $('figure#spinner figure.current').toggleClass('caption');
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault();
});

有什么我们遗漏的吗？

Answer 1

您的轮播使用 JQuery，但您没有在页面上包含 JQuery 库。在任何其他 javascript 文件之前将此行添加到您的 head:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>