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

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

1 个答案: