Question

我正在修改一个图像旋转器，它也可以从UL中随机选择图像。我的目标是选择所有LI而不重复。我的方法是在.show类完成后添加.remove类，然后在随机数学var中，不选择.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>

随机图像旋转，不重复图像

0 个答案: