如何显示每页刷新一个div? [英] How to show one div of many, per page refresh?

问题描述

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

The JavaScript below will show the blockquote in the markup one every 6000 ms. I want to change this behaviour to only show one every page load. I am ok with loading all of them in the markup, I just want to only a random one in every page load.

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

});
</script>

作为奖励，如果在浏览器中禁用JavaScript，我将只显示一个.

As a bonus, If JavaScript is disabled in the browser I will like to only show one.

<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 查看页面右下部分的推荐书"

---

If you want to see the website where the code is you can go to http://www.kiragiannis.com look at the bottom right section of the page something called "testimonials"

推荐答案

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

You can use a random number based on the element length and the .eq() method with the following jQuery:

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

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

这是一个小提琴演示. 单击运行"以查看新的随机报价.

Here's a fiddle demo. Click "Run" to see new random quote.

这篇关于如何显示每页刷新一个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！