JQuery文本旋转器

JQuery text rotator

本文关键字：旋转 文本 JQuery      更新时间：2024-06-10

我正在尝试创建一个简单的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>

好吧，我玩得很快，并为您扩展了一点。。

JS Fiddle：http://jsfiddle.net/4k3zfv5f/

    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);

编辑-更新

基本上，我必须做一些更正，所以我没有一一复习。。只是让你比较一下变化。。部分原因是fade函数没有等到它们完成，Delay命令只适用于jquery对象，而append我只是为了直观起见而反转了。

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

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

JS Fiddle Showing With Shuffle示例：http://jsfiddle.net/ye3rjy2v/1/

append>fade>delay>fade的逻辑并没有真正起作用。我在淡出中添加了一个Timeout和一个回调函数，使其工作良好。还使编写调用函数变得更容易，因此您只有一个额外的参数。示例

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"]);
});

JSBIN演示

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

相关文章：