0

我正在修改一个图像旋转器，它也从 UL 中随机选择图像。我的目标是让所有 LI 都被选中而不重复。我的方法是在 .show 类完成后添加 .remove 类，然后在随机数学变量中，不选择 .remove 类。

我在使用以下代码时遇到的一个小问题是，有时 .show 类不会应用于 LI，并且它会在没有图像的情况下经历该循环。最终，所有图像都显示，然后接收“删除”类，并且没有重复，但我希望始终有一个 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>
4

0 回答 0