0

ここで見られる私の質問に関連しています:リストを垂直に配置しながら、リストをテキストでインラインに保つ

リストをいくつかのテキストでインラインに保ちながら、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);
4

1 に答える 1

0

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

フィドル

于 2013-10-19T04:51:38.267 に答える