javascript - 使用JS循环列表同时保持与文本一致

Question

与我在这里看到的问题相关：保持列表与文本内联，同时保持列表垂直定位

在使用 js 循环浏览列表时遇到问题，同时使列表与某些文本保持一致。向左浮动文本可以解决问题，直到我必须格式化文本/列表并将其居中。

到目前为止我所拥有的：http: //jsfiddle.net/pthbK/ 试图实现类似于： https: //www.youeye.com/

由于某种原因，该列表会追加，导致文本略低于列表。目标是让列表直接出现在列表旁边（在我的例子中是左侧）。

<center>
<div id = "text">Sometext&nbsp;</div>
    <ul id = "ticker">
        <li>3</li>   
        <li>2</li>
        <li>1</li>
   </ul>





#ticker {
    height: 40px;
    overflow: hidden;
    list-style-type: none;
    list-style-position: oustide;
    padding: 0;
    display:inline-block;
}
#ticker li {
    height: 40px;
}
#text {
    display: inline;
}



function tick(){
$('#ticker li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tick () }, 4000);

Answer 1

HTML：

<div class="center">You ate an <span id="text"></span>.</div>

JavaScript：

var i = 0,
    texts = ['apple', 'banana', 'orange'];

function cycleText() {
    $("#text").text(texts[i]);
    if ((i += 1) === texts.length) {
        i = 0;
    }
}
cycleText();
setInterval(cycleText, 1000);

小提琴