Question

我和一位同事尝试在我们的网站上添加一个旋转木马，但发现它不会相应地运作。以下是我们当前代码的（相关数量）。我们还希望有一个单独的JS文件并调用它，但我们不确定如何这样做。有任何想法吗？

<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<link href="style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


</head>
<body>

<div id="section2">

    <div id="section2inner">

        <!-- Carousel Begins Here -->

    <script>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();
});
</script>

<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>

        <!-- Carousel Ends Here -->

</div>
<div id="section2text">
        <h1>H1<h1>
        <p>P</p>
        </div>

    </div>

</div>

</body>

此外，this is the Codepen we got the Carousel from.

Answer 1

将以下代码放入名为carousel.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();
});

然后将文件carousel.js放在与索引文件相同的目录中。删除索引文件中的标记（上面的脚本和标记）之间的内容，然后删除此行

之后的内容

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

把

<script src="carousel.js" type="text/javascript"></script>

如果您收到未定义函数等错误，请将链接放在html代码后的文件中。

Answer 2

你必须把你的脚本放在正文结束之前，所以它看起来像这样。

<body>
 <!-- HTML Stuff -->
 <!-- Carousel Script or link to file -->
</body>

轮播问题？（疑似JQuery）

2 个答案:

轮播问题？ （疑似JQuery）

2 个答案:

轮播问题？（疑似JQuery）