我对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的网址,如果有任何帮助的话。
答案 0 :(得分:0)
这段代码存在很多问题,但我只会首先回答明显的语法分解问题,一旦修复了这些代码,也许你可以再试一次。
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
作为一个单词
希望这些明显的问题可以让您更接近解决方案。尽量小心清理语法。 :)