Question

我对JavaScript很陌生，但在整体上都有前端开发的经验。我试图让JS迭代提供的列表并在我的网站上显示结果。在移动到列表中的下一个项目之前，每个项目将显示一次。当它到达结尾时，将永久显示最后一个项目。我正在使用Textillate JS库。

我的代码出了什么问题？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
var title-transitions = [
    "Create Solutions",
    "Build Relationships",
    "Design Brands",
    "Redifine Excellence"
    ],

    transitionCounter = 0,
    looped = false,
    textillateSettings ={
      loop:false,
      in:{
        callback:fucntion(){
          if(!looped) $('h1.introduction-heading').fadeOut(3800);
        }
      }
    };

var $h1 = $('h1.introduction-heading');
$h1.introduction-heading(textillateSettings);

var animationHero = set Interval(function(){
  transitionCounter =
  (transitionCounter == transition.legnth -1)
  ? 0 : transitionCounter + 1;

  if(transitionCounter == 0){
    looped = true;
    clearInterval(animatedHero);
  }

  $('h1.introduction-heading').remove();
  $('h1.introduction-heading')
    .text(transition[transitionCounter])
    .textillate(textillateSettings);

}, 6000);
</script>

以下是textillate site的网址，如果有任何帮助的话。

Answer 1

这段代码存在很多问题，但我只会首先回答明显的语法分解问题，一旦修复了这些代码，也许你可以再试一次。

callback: fucntion(){
    if(!looped) $('h1.introduction-heading').fadeOut(3800);
}

^'功能'拼写错误

$h1.introduction-heading(textillateSettings);

这是什么意思？你已经按类名选择了一个元素，如果你想将textillate应用到某个文本那么

$h1 = $('.introduction-heading');

$h1.textillate(textillateSettings);

然后最后：

var animationHero = set Interval(function(){

您要调用的方法是setInterval作为一个单词

希望这些明显的问题可以让您更接近解决方案。尽量小心清理语法。：）

我提供的JavaScript有什么特别的错误？

1 个答案: