Question

我正在尝试在网站上设计一段旋转文本，并需要有关从哪里开始以及如何完成此操作的帮助。我希望它说“我们的业务 _ 您的业务。”而 _ 是我希望它用不同的词旋转，如“成长”，“建立”，“帮助”等。我可以编写HTML代码，熟悉javascript和jquery。我不想用flash做。此时我已经为模拟编写了基本代码。

<html>
<head>
<title>Rotating Text</title>
<style type="text/css">
body,td,th {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 16px;
    color: #00C;
}
</style>
</head>

<body>
<p><strong>Our Business Is &nbsp; &nbsp; &nbsp; Your Business!</strong></p>

</body>
</html>

非常感谢任何帮助。

Answer 1

您可以轻松地使用jQuery完成此操作，使用span替换您要替换的区域，并使用jQuery将数组中的上下文替换为数组中的随机单词。

<强> HTML：

<p><strong>Our Business Is <span id='test'>XXX</span> Your Business!</strong></p>

<强> jQuery的：

<script type='text/javascript'>
$(document).ready(function(){

    //Sets your words into an array
    var phrases =new Array("growing","building","helping");
    //Selects a random one
    var random = Math.floor(Math.random()*phrases.length);
    //Sets your area to use that random word
    $("#test").text(phrases[random]);

});
</script>

Working Demo

如果您需要轮换，可以将其简单地包裹在 setInterval 功能中：

<强> jQuery的：

function setRandomWord()
{
    var phrases =new Array("growing","building","helping");
    //Selects a random one
    var random = Math.floor(Math.random()*phrases.length);
    //Sets your area to use that random word
    $("#test").text(phrases[random]);  
}

//Your function will fire every 5 seconds...
setInterval(setRandomWord,5000);

Working Demo with Interval

复制粘贴的完整代码：

<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
    function setRandomWord(){
        var phrases =new Array("growing","building","helping");  
        $("#test").text(phrases[Math.floor(Math.random()*phrases.length)]);
    }
    setInterval(setRandomWord,3000);
});
</script>
</head>
<body> 
<p><strong>Our Business Is <span id='test'>bettering</span> Your Business!</strong></p>    
</body> 
</html>

Answer 2

您可以使用setInterval example

var words = ['Growing', 'building'];
var index = 0;

function rotate() {
    document.getElementById('text').innerHTML = "Our Business Is " + words[(index++)%(words.length)] + " Your Business!!";
}

setInterval(rotate, 2000);

Answer 3

您可以创建一个数组，用您想要的单词填充它，然后选择该数组的随机元素。

var words = new Array();
words[0] = "word 1";
words[1] = "word 2";
words[2] = "word 3";
words[3] = "words 4";

var randomnumber=Math.floor(Math.random()*4)

alert(words[randomnumber]);

其中4表示随机数将落在0-3之间。要将范围增加到100，只需将4更改为101

在HTML中旋转文本

3 个答案: