1

私はdivを持っていて、その中に一度に3つのテキストを表示したいと思います。Windows8メトロテーマのように。私はこのような3つのdivを持っています：

<div id='a'> Text 1</div> <div id='b'> Text 2</div> <div id='c'> Text 3</div>

そして、これらすべてをラップする別のメインdiv。イベントが下から上に発生せず、新しいdivが他のdivの上をスライドすることなく、ラッパー内に一度に1つのdivを表示したいと思います。

PS：私は画像とCSSを使用してそれを行う方法を見てきました。しかし、画像ではなくhtmlを介してテキストを表示したいのですが、jqueryを使用してこれを行う方法はありますか？ありがとうございました。

4

1 に答える 1

1

基本的な例：http：//jsfiddle.net/rNcNA/

HTML：

<div id="container">
    <div class="content">Some content here</div>
    <div class="content hidden">Other content here</div>
    <div class="content hidden">Yet more content here</div>
</div>​

JavaScript：

$(document).ready(function() {
    var interval = 2000; // 2 seconds
    var contents = $('#container').find('.content');
    var index = 0;
    var display = function(index) {
        $('.content:visible').fadeOut('fast', function() { $(contents[index]).fadeIn(); });
        index += 1;
        if (index > contents.length-1) {
            index = 0;
        }
        setTimeout(function() { display(index) }, interval);
    }

    display(index);
});​
于 2012-12-05T06:05:40.053 に答える