0

フルスクリーンに設定された順序付けられていないリストがあり、各liには繰り返しの背景パターンがあります。ページが読み込まれるとすぐに、各liが20秒ごとにフェードイン/フェードアウトするようにします。私の jsfiddle: http://jsfiddle.net/uWwfv/1/

CSS の方法 (li 要素の絶対配置) を試しましたが、フルスクリーン スクリプトでは機能しないため、各 li をフェードイン/フェードアウトするには純粋な jQuery が必要です。どうすればこれを行うことができますか?

フルスクリーンコードは次のとおりです。 

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

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 に答える
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 に答える