0

我有一个“英雄”单元，其代码如下：

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

然后隐藏和显示内容，但这是一个非常丑陋的解决方案，它并没有真正起作用。任何人都可以提出其他建议吗？

4

2 回答 2

3

你可以使用这个 jquery 插件http://jquery.malsup.com/cycle/它很容易使用。您只需将您h1和p放在 adiv中，这将使其成为 aslide并将它们放在<div class="slideshow">父 div 中。如下调用

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

小提琴

更新

pause: 1如果您想让幻灯片暂停，您也可以使用鼠标悬停在幻灯片上

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

暂停

于 2013-07-26T00:38:43.743 回答
1

我会做一个递归函数，它会淡入淡出。然后它使用下一个选择器调用自己以获取下一个元素作为它的参数，当 .next() 返回 null 时，再次选择第一个元素。当然，当您希望它停止时，您将需要放置某种基本案例。所以：

function cycle(elem) {
    if(!baseCase){
        elem.fadeIn(400).delay(4000).fadeOut(400)
        if(elem.next()){
            cycle(elem.next());
        }else{
            cycle(first elem);
        }
    }
}

jfiddle: http://jsfiddle.net/6pKkX/ 我不得不做一些改变，比如在递归之前等待fadeOut结束。!false 是您的基本情况的占位符，因此在您的版本中，!someBoolean当您希望它停止循环时，它将是 someBoolean 为真的地方。

于 2013-07-26T00:30:20.867 回答