Question

我有一个设置为全屏的无序列表，每个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>

注意：我希望远离使用大量插件，尤其是当大多数人不能满足背景重复行为时。

Answer 1

我会创建一个函数来执行此操作并使用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)
});

Answer 2

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/

在同一个地方淡入/淡出元素

2 个答案: