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

时间：2014-07-09 11:17:03

标签： javascript jquery html css

与同事一起加入Codepen的Carousel。我们已经相应地插入了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();
});

有什么我们错过的吗？

3 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

是这样的还是没有？

不要错过： 

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

<强> HTML 

<div id="cfs-carrousel">
 <head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 </head>
 <div id="wrapper">
  <div id="carrousel">
   <img src="http://lorempixel.com/600/400/fashion/1" alt="c1" width="600" height="400">
   <img src="http://lorempixel.com/600/400/fashion/2" alt="c2" width="600" height="400">
   <img src="http://lorempixel.com/600/400/fashion/3" alt="c3" width="600" height="400">
   <img src="http://lorempixel.com/600/400/fashion/4" alt="c4" width="600" height="400">
   <img src="http://lorempixel.com/600/400/fashion/5" alt="c5" width="600" height="400">
   <img src="http://lorempixel.com/600/400/fashion/6" alt="c6" width="600" height="400">
   <img src="http://lorempixel.com/600/400/fashion/7" alt="c7" width="600" height="400">
   <img src="http://lorempixel.com/600/400/fashion/8" alt="c8" width="600" height="400">
   <img src="http://lorempixel.com/600/400/fashion/9" alt="c9" width="600" height="400">
   <img src="http://lorempixel.com/600/400/fashion/10" alt="c10" width="600" height="400">
  </div>
 </div>
 <div id="pagination">
  <div id="thumbnails">
   <img src="http://lorempixel.com/100/100/fashion/1" alt="c1" width="100" height="100">
   <img src="http://lorempixel.com/100/100/fashion/2" alt="c2" width="100" height="100">
   <img src="http://lorempixel.com/100/100/fashion/3" alt="c3" width="100" height="100">
   <img src="http://lorempixel.com/100/100/fashion/4" alt="c4" width="100" height="100">
   <img src="http://lorempixel.com/100/100/fashion/5" alt="c5" width="100" height="100">
   <img src="http://lorempixel.com/100/100/fashion/6" alt="c6" width="100" height="100">
   <img src="http://lorempixel.com/100/100/fashion/7" alt="c7" width="100" height="100">
   <img src="http://lorempixel.com/100/100/fashion/8" alt="c8" width="100" height="100">
   <img src="http://lorempixel.com/100/100/fashion/9" alt="c9" width="100" height="100">
   <img src="http://lorempixel.com/100/100/fashion/10" alt="c10" width="100" height="100">
  </div>
 </div>
</div>

<强> CSS 

#wrapper {
width: 600px;
height: 400px;
overflow: hidden;
}
#carrousel {
width: 600px;
height: 400px;
overflow: hidden;
position: absolute;
}
#carrousel img {
display: block;
float: left;
}
#pagination {
display: block;
width: 600px;
height: 100px;
overflow: hidden;
}
#thumbnails img {
}

<强> JS 

$(function() {
      $('#pagination').hover(
       function() {
        $('#carrousel').trigger( 'pause' );
       }, function() {
        $('#carrousel').trigger( 'play' );
       }
      );

      $('#carrousel').carouFredSel({
       scroll: {
        fx: 'crossfade'
       },
       auto: {
        onBefore: function( oldI, newI ) {
         $('#thumbnails').trigger( 'slideTo', [ '#thumbnails img[alt='+ newI.attr( 'alt' ) +']', -2 ] );
        }
       }
      });

      $('#thumbnails').carouFredSel({
       auto: false,
       items: {
        start: -2
       }
      });

      $('#thumbnails img').click(function() {
       $('#thumbnails').trigger( 'slideTo', [ this, -2 ] );
       $('#carrousel').trigger( 'slideTo', [ '#carrousel img[alt='+ $(this).attr( 'alt' ) +']' ] );

      }).css( 'cursor', 'pointer' );
     });

答案 2 :(得分：0)

您的网站中没有添加Jquery（read more）。你需要jquery库来实现这种效果。将其添加到</head>

上方的网页上 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

以上是Google托管的Jquery库的链接。

相关问题
最新问题