使用JS循環列表，同時符合文本

Question

相關這裏看到我的問題保持：Keeping list inline with text while keeping list vertically positioned

遇到問題使用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); 

FIDDLE