Question

我想要一个脚本使用jQuery淡入和淡出div中的图像。

我正在使用以下代码（来自http://jonraasch.com/blog/a-simple-jquery-slideshow）：

function slideSwitch() {

var $active = $('div.box1 img.active');

if ( $active.length == 0 ) $active = $('div.box1 img:last');

    var $sibs  = $active.siblings('img');
    var rndNum = Math.floor(Math.random() * $sibs.length );
    var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

此脚本目前运作良好，并从div.box1中的兄弟图像中随机选择。

除此之外我决定我还想让它首先从页面上带有类“boxgrid”（而不是像.box1这样的特定类）的那些中选择一个随机div（有6个带有.boxgrid的容器div） class applied）这是图像的容器。

即。我首先想要随机选择一个.boxgrid div，然后在选定的div中继续选择一个随机图像并按照上面的脚本淡出到下一个脚本。这是我正在使用的xhtml：

<div class="boxgrid box1">
                            <img src="img/homepage/box1-1.png" class="active"/>
                            <img src="img/homepage/box1-2.png"/>
                            <div class="boxcaption">
                                <h3>Header</h3>
                              <p>Text goes here...</p>
                            </div>

                        </div>

我自己试图（我显然不是程序员 - 但我正在尝试）我想出了以下内容：

function slideSwitch() {

var $randbox = $('div.boxgrid').siblings();
var rndBox = Math.floor(Math.random() * $randbox.length );


var $active = $( $randbox[ rndBox ] );

if ( $active.length == 0 ) $active = $('img:last');

    var $sibs  = $active.siblings('img');
    var rndNum = Math.floor(Math.random() * $sibs.length );
    var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

我正在寻找这个方面的一些帮助，因为我正在努力让它选择一个随机的div.boxgrid，然后就像在原始脚本中那样随机淡化图像。我接近了吗？

非常感谢任何帮助。

感谢。

Answer 1

首先，在我看来你应该使用setTimeout而不是setInterval。

其次，jquery有一个可以使用的向上滑动和向下滑动的方法也会做同样的事情。

第三，您可以使用eq方法选择索引框。

e.g。 $（ '盒：当量（' + RANDOM_NUMBER + '）'）了slideDown（）;

并使用setTimeout执行slideUp

随机div中的jQuery随机淡化图像（来自兄弟姐妹）（具有特定类）

1 个答案: