<div id="changeText" ></div>
<script type="text/javascript">
var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 1000);
function change() {
elem.innerHTML = text[counter];
counter++;
if(counter >= text.length) { counter = 0; }
}
</script>
如何在此 JavaScript 代码中添加淡入淡出效果? 另外,如何使其以"欢迎"而不是空格开头?我将非常感谢您的帮助。
如果你不想添加jQuery
var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");
elem.style.opacity = 0;
var opCounter = 0;
setInterval(change, 3000);
function change() {
elem.innerHTML = text[counter];
setInterval(opChange, 300);
counter++;
if(counter >= text.length) { counter = 0; }
elem.style.opacity = 0;
opCounter = 0;
}
function opChange(){
elem.style.opacity = opCounter;
opCounter = opCounter + 0.1;
}
见JSFIDDLE