javascript - 画像を繰り返さないランダム画像回転

Question

ULからランダムに画像を選択する画像回転子を変更しています。私の目標は、繰り返しなしですべての LI を選択することです。私のアプローチは、.showクラスが完了したら.removeクラスを追加し、次にランダムな数学変数で.removeクラスを選択しないことでした。

次のコードで私が抱えている小さな問題は、時々、.show クラスが LI に適用されず、画像なしでそのサイクルを通過することです。最終的に、すべての画像が表示され、「削除」クラスを受け取り、繰り返しはありませんが、空白がないように常に1つのli.showが必要です。

私は JS の知識がほとんどないので、このアプローチが間違っていると思われる場合は、代替手段を歓迎しますが、見落としている単純なものがあるようです。

ありがとう。

function theRotator() {
    $('div#box1.rotator li').css({
        opacity: 0.0
    });
    $('div#box1.rotator li:first').css({
        opacity: 1.0
    });
    setInterval('rotate()', 25000);

}

function rotate() {
    var current = ($('div#box1.rotator li.show') ? $('div#box1.rotator li.show') : $('div#box1.rotator li:first'));

    if (current.length == 0) current = $('div#box1.rotator li:first');

    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#box1.rotator li:first') : current.next()) : $('div#box1.rotator li:first'));

    //Un-comment the 3 lines below to get the images in random order
    var sibs = current.siblings();
    var rndNum = Math.floor(Math.random() * sibs.length);
    var next = $(sibs[rndNum]).not('.remove'); //HERE I ADDED: .not('.remove')
    next.css({
        opacity: 0.0
    }).addClass('show').animate({
        opacity: 1.0
    }, 10000);

    //Hide the current image
    current.animate({
        opacity: 0.0
    }, 10000).removeClass('show').addClass('remove'); //AND HERE I ADD THE REMOVE CLASS AFTER SHOW...
};

HTML のサンプル構造:

<div id="box1" class="rotator">
    <ul>
        <li class="show">
            <img src="images/006.jpg" />
        </li>
        <li>
            <img src="images/014.jpg" />
        </li>
        <li>
            <img src="images/019.jpg" />
        </li>
    </ul>
</div>