0

我有一个设置为全屏的无序列表，每个 li 都有一个重复的背景图案。我希望每个 li 在页面加载后每 20 秒淡入/淡出。我的jsfiddle：http: //jsfiddle.net/uWwfv/1/

我已经尝试过 css 方式（我的 li 元素的绝对定位），但它不适用于我的全屏脚本，因此需要纯 jQuery 来淡入/淡出每个 li。我该怎么做？

全屏代码为： 

function fitElements() {

var height = $(window).height();

var width = $(window).width();

$('ul#fullscreen-slider li').css('height', height);

$('ul#fullscreen-slider li').css('width', width);

};


$(document).ready(function() {
fitElements();
});

HTML：

<section id="home">
    <ul id="fullscreen-slider">
        <li><h1 class="cherry-red"><span>Slide 1</span></h1></li>
        <li><h1 class="cherry-red"><span>slide 2</span></h1></li>
        <li><h1 class="cherry-red"><span>slide 3</span></h1></li>
        <li><h1 class="cherry-red"><span>slide 4</span></h1></li>
        <li><h1 class="cherry-red"><span>slide 5 - when complete fade to slide 1</span></h1></li>
    </ul>
</section>

注意：我想避免使用繁重的插件，尤其是当大多数插件不适合后台重复行为时。

4

2 回答 2

0

我将创建一个函数来执行此操作并使用 setInterval 调用它。

然后，当所有页面加载完毕后，调用 clearInterval 函数停止闪烁。

http://jsfiddle.net/uWwfv/4/

function fadeBlinking() {
    $('li').fadeOut(500, function () {
        $(this).fadeIn(500);
    });
}

var intervalHandle = setInterval(function () {
    fadeBlinking();
}, 20000);

fadeBlinking();

$(document).ready(function () {
    fitElements();

    //Stop blinking when your condition is met
    clearInterval(intervalHandle)
});
于 2013-02-25T15:52:05.007 回答
0

JS函数

function slideshow() {
    $('#fullscreen-slider li:gt(0)').hide();
    setInterval(function(){$('#fullscreen-slider :first-child').fadeOut().next('li').fadeIn().end().appendTo('#fullscreen-slider');}, 3000);
}

至于 CSS，添加position:relative;到 UL，添加position:absolute; left:0; top:0;到 LI，并为每个 LI 添加一个具有背景的类。

你唯一需要改变的是每个 li 需要它的类作为它的背景而不是使用 nth-child，因为这段代码现在正在弄乱 li 的组织，通过获取刚刚褪色的一个并再次附加到最后（因此可见的永远是nth-child(0)）。

这是Jonathan Snook对Simplest jQuery Slideshow的轻微修改版本。

这是我的 jsFiddle http://jsfiddle.net/jRDkm/1/

于 2013-02-25T16:25:27.767 回答