Javascript JQuery文本旋转器

我正在尝试创建一个简单的jquery文本旋转器： 我有一个跨度，文本应该淡入淡出。 在stackoverflow上也有类似的问题，但我无法将它们的解决方案应用于我的情况 以下是我到目前为止所写的内容，我想知道为什么这段代码不起作用：

var i=0;
function rotate(spanid,w1,w2,w3){
  var myspan = "#"+spanid;
  var words = [w1,w2,w3];
  $(words[i]).appendTo(myspan).fadeIn(2000).delay(2000).fadeOut(2000);
  i==words.length? i=0:i++;
  rotate(spanid,w1,w2,w3);    
  }

解决问题的方法正确吗？为什么该代码不起作用？ 提前谢谢大家

编辑 代码不起作用，因为没有显示任何内容。 以下是与函数相关的html部分：

<p>Blah blah blah <span id="rotate"></span> blah blah blah </p>
<script>
$(rotate("rotate","word1","word2","word3"));
</script>

废话废话废话

$（旋转（“旋转”、“字1”、“字2”、“字3”）；

---

好的，我有一个快速播放，并为您扩展了一点

JS小提琴：

编辑-更新

基本上，我需要做一些更正，所以我没有逐一检查。。将只让您比较更改。。部分原因是淡入淡出函数没有等到它们完成，延迟命令只适用于jquery对象和我为了视觉目的而反转的追加

正如您在评论中提到的，最后一部分是用html交换appendTo

作为额外的奖励，一个洗牌示例：

---

JS用Shuffle示例显示Fiddle:

附加>淡入>延迟>淡入的逻辑实际上不起作用。我在淡出中添加了一个超时和回调函数，使其能够很好地工作。还可以更容易地编写调用函数，因此您只有一个额外的参数

---

上述代码将在特定的时间间隔后旋转数组中定义的单词。

它是如何工作的？你有相关的HTML代码吗？没有显示任何内容…我将编辑问题。谢谢，该函数是如何调用的，何时调用的？@JamieBarker请参见edit=）我还可以知道为什么我的问题被否决了吗？只是为了避免下次犯同样的错误非常好！我想知道有没有一种更简单的方法。但答案很好…谢谢！！我个人必须说，这不是最干净的解决方案，使用settimeout与只使用回调函数进行淡入淡出功能相比，实际上它应该只显示一个单词……也许我的问题不清楚。对不起，很容易解决。。很抱歉你说旋转器。。。只需将append替换为html。。我将编辑此答案。您会注意到，我仅为每个跨度/元素使用1个全局变量。。剩下的是自我动力，我选择了这个作为答案，因为它是最干净的，我又做了一个改变，我想你会喜欢的，替换了第一把小提琴。。没有更多变量；）我忘了你可以使用一个数字而不是一个变量。在这种情况下/范围内。

    function rotate(sID,aWords, iIndex){
        $("#"+sID).html(aWords[iIndex]).fadeIn(1000, function() {   
            iIndex==(aWords.length-1)? iIndex=0:iIndex++;           
            $("#"+sID).fadeOut(1000, function() {                   
                rotate(sID,aWords,iIndex);                          
            }); 
        });
    }



    rotate("test1",["Hello", "World", "Foo"], 0);
    rotate("test3",["John", "Bob", "Billy", "Mike", "Larry"], 0);

var i = 0;

function rotate(spanid, words) {
    var arrWords = words.split(',');
    var myspan = $('#' + spanid);
    i == arrWords.length-1 ? i = 0 : i++;
    myspan.text(arrWords[i]);
    myspan.fadeIn();
    setTimeout(function(){             
        myspan.fadeOut(400, function() {            
            rotate(spanid, words); 
        });
    }, 2000);
}

rotate('rotate', 'word1,word2,word3');

$(function () {
    function rotate(spanid, arrayOfWords) {
        var $mySpan = $("#" + spanid);
        (function repeatRotate(index) {
            var i = index || 0;
  $mySpan.text(arrayOfWords[i]).fadeIn(1000).fadeOut(1000, function () {
                i = (i === arrayOfWords.length - 1) ? 0 : ++i;
                repeatRotate(i);
            });
        })();
    }
    rotate("rotate", ["word1", "word2", "word3"]);
});