jQuery文本旋转器 [英] JQuery text rotator

问题描述

我正在尝试创建一个简单的jquery文本旋转器: 我有一个跨度，文本应淡入和淡出. 这里有关于stackoverflow的类似问题，但我无法将其解决方案应用于我的情况 这是我到目前为止编写的内容，我想知道为什么此代码不起作用:

I am trying to create a simple jquery text rotator: I have a span in which text should fade in and out. There are similar questions here on stackoverflow but I can't apply their solutions to my situation Here is what I wrote so far and I was wondering why this code doesn't work:

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

解决问题的方法正确吗?为什么此代码不起作用? 预先谢谢大家！

Is the approach to the problem correct? Why isn't this code working? Thank you all in advance!

编辑 由于没有显示任何内容，因此该代码无法正常工作. 这是相对于该函数的html部分:

EDIT The code isn't working as nothing is showing up. Here is the html section relative to the function:

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

推荐答案

好的，我玩的很快，为您扩展了一些内容.

Okay, i've had a quick play and expanded it a little for you..

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

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

编辑-更新

基本上，我必须进行一些更正，因此不必遍历每一个..仅允许您比较更改..部分原因是淡入淡出功能没有等到完成才等待，Delay命令仅适用于jquery对象，为了我的视觉缘故，我颠倒了附加对象.

Basically there were a few corrections i had to make, so instead of going over each one.. Will just let you compare the changes.. Part of it is that the fade functions did not wait til they completed, the Delay command only applies to the jquery object and the append i reversed just for my visual sake.

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

Also the last part as you mentioned in the comments, was to swap appendTo with html.

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

JS Fiddle与随机播放示例: http://jsfiddle.net/ye3rjy2v/1/

JS Fiddle Showing With Shuffle Example: http://jsfiddle.net/ye3rjy2v/1/

这篇关于jQuery文本旋转器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！