我尝试创建一个Jquery TypeWriter效果,每10秒滚动一次不同的句子。在10秒钟休息时,网站的风格也会发生变化。我的问题是,在第一次通过我的句子之后转向乱码作为变量' text_number'不断变化,我不知道为什么。
任何帮助都将不胜感激。
var textOne = '"HELLO WORLD"';
var textTwo = '"WHAT IS HAPPENING"';
var textThree = 'GOOD MORNING';
function text_change(text_number) {
if (text_number === 1) {
var splitText = textOne.split("");
} else if (text_number === 2) {
var splitText = textTwo.split("");
} else if (text_number === 3) {
var splitText = textThree.split("");
}
var n = splitText.length;
function text_animation(textPos) {
var previousI = textPos - 1;
var nextLetter = splitText.slice(previousI, textPos);
if (nextLetter == '*') {
$("#quote-div p").append("<br>");
} else {
$("#quote-div p").append(nextLetter);
}
}
i = 0;
setInterval(function() {
i++;
if (i <= n) {
text_animation(i);
}
}, 0200);
}
var site = 1;
//Animate Site Function
function animate_site(site_number) {
if (site_number == 1) {
//Extra CSS for site changes
$("#quote-div p").empty();
text_change(site_number);
} else if (site_number == 2) {
//Extra CSS for site changes
$("#quote-div p").empty();
text_change(site_number);
} else if (site_number == 3) {
//Extra CSS for site style change each 10 seconds
$("#quote-div p").empty();
text_change(site_number);
site = 0;
}
}
function animate_site_loop() {
setInterval(function() {
site++;
animate_site(site);
}, 10000);
}
$(document).ready(function() {
animate_site_loop();
text_change(site);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="quote-div">
<p></p>
</div>
&#13;