javascript - 使用 Javascript 淡入/淡出英雄单元中的不同文本

Question

我有一个“英雄”单位，其代码如下:

<div class="hero-unit">
    <div class="container">
        <h1>Dapibus Euismod Mollis</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
    </div>
</div>

我想做的是有四五个不同的 <h1>的和<p>然后让每一个在五秒后淡入下一个，最后循环回到开头。到目前为止我尝试过的是:

<div class="hero-unit">
    <div class="container">
        <h1>Dapibus Euismod Mollis</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
        <h1>Dapibus Euismod Mollis</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
        <h1>Dapibus Euismod Mollis</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
    </div>
</div>

然后隐藏和显示内容，但这是一个非常丑陋的解决方案，实际上不起作用。谁能提出其他建议吗？

Answer 1

您可以使用这个jquery插件http://jquery.malsup.com/cycle/这是非常容易使用。您只需要放置您h1和p里面 div这将使其成为 slide并将它们放入<div class="slideshow">内父分区调用方式如下

$('.slideshow').cycle({
   fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
}); 

FIDDLE

更新

您还可以使用pause: 1如果您想在将鼠标悬停在幻灯片上时使幻灯片暂停

$('.slideshow').cycle({
       fx: 'fade',
       pause: 1
});

FIDDLE WITH PAUSE