如何在每页刷新时显示多个div?

时间:2011-03-07 21:40:52

标签: javascript jquery

下面的JavaScript将每6000毫秒显示一次标记中的blockquote。我想将此行为更改为仅显示每个页面加载一个。我可以在标记中加载所有这些,我只想在每个页面加载中随机添加一个。

<script type="text/javascript">
jQuery(document).ready( function(){
    jQuery('.quotes').innerfade({
        animationtype: 'fade',
        speed: 'normal',
        timeout: 6000,
        type: 'random_start',
    });

});
</script>

作为奖励,如果在浏览器中禁用了JavaScript,我只想显示一个。

<div class="quotes innerfade" style="position: relative; height: 277px;">
    <div class="quote" style="z-index: 8; position: absolute; display: none;">
        <blockquote><p>“Throw out costs by more than 50%.”</p></blockquote>
                        <cite>Da John @ Con Pi LLC</cite>
                    </div>

                    <div class="quote" style="z-index: 7; position: absolute; display: none;">
                        <blockquote><p>“Georgio pany.”</p>
</blockquote>
                        <cite>Kn Maez, Mnet</cite>
                    </div>

                    <div class="quote" style="z-index: 6; position: absolute; display: block;">
                        <blockquote><p>“…He hae is available.”</p>
</blockquote>
                        <cite>Dan net</cite>
                    </div>

                    <div class="quote" style="z-index: 5; position: absolute; display: none;">
                        <blockquote><p>“Georommend without a doubt.”</p>
</blockquote>
                        <cite>Jorge Suár Puerto Rico</cite>
                    </div>

                    <div class="quote" style="z-index: 4; position: absolute; display: none;">
                        <blockquote><p>“Siain tomorrow…”</p>
</blockquote>
                        <cite>Cha, Inc.</cite>
                    </div>
                </div>

如果您想查看代码所在的网站,您可以转到http://www.kiragiannis.com,查看页面右下角的“推荐书”

2 个答案:

答案 0 :(得分:4)

您可以使用基于元素长度的随机数和.eq()方法以及以下jQuery:

var whichToShow = Math.floor(Math.random() * $('.quote').length);

$('.quote').hide().eq(whichToShow).fadeIn(1000);

Here's a fiddle demo.点击“运行”查看新的随机引用。

答案 1 :(得分:1)

隐藏它们全部,并使用id quoteN,其中N是0到nr引号之间的整数。然后使用math.random选择要显示的N.构建id字符串并在文档准备就绪时显示它。