Question

我在jquery中有一个旋转/淡入div，它运行良好，但我现在希望它在同一页面上对第二个div做同样的事情，但是不能让它工作。

我目前的代码是：

$(window).load(function() {
setInterval('cycleImages()', 5000);
})

function cycleImages() {
var $active = $('#main-photo-area .active');
var $next = ($('#main-photo-area .active').next().length > 0) ? $('#main-photo-area .active').next() : $('#main-photo-area div:first');
$next.css('z-index', 2);
$active.fadeOut(1500,function() {
  $active.css('z-index', 1).show().removeClass('active');
  $next.css('z-index', 3).addClass('active');
});
}

通过更改容器中div的z索引，可以正常工作并交叉淡化div id =“main-photo-area”。

我现在也想要同一段代码淡化另一组div，例如：id =“second-photo-area”。

任何人都可以看到我如何改变这个cycleImages（）脚本来同时淡化两个div集，而不需要添加另一个例程来执行此操作吗？

我知道有很多其他方法可以做到这一点，但我希望能够使用已有的代码高效，而不是在可能的情况下添加其他例程。

提前致谢。

Answer 1

一种可行的方法是为所有照片区域指定一个公共类名称，例如photo-area，然后使用.each()遍历每个实例：

$(window).load(function() {
    setInterval(cycleImages, 5000);
})

var cycleImages = function() {
    $('.photo-area').each(function() {
        var $active = $(this).find('.active'),
            $next = ($active.next().length > 0) ? $active.next() : $(this).find('div:first');

        $next.css('z-index', 2);
        $active.fadeOut(1500,function() {
            $active.css('z-index', 1).show().removeClass('active');
            $next.css('z-index', 3).addClass('active');
        });
    });
}

我对您的代码所做的一些更改：

将函数声明为变量，并直接在setInterval()
利用缓存的jQuery对象，并在定义$active时引用$next，以节省在DOM节点中查找感兴趣的元素的工作量。

Answer 2

您可以通过以下方式更改您的功能：

function cycleImages(val) {
    var $active = $('#' + val + ' .active');
    var $next = ($('#' + val + ' .active').next().length > 0) ? $('#' + val + ' .active').next() : $('#' + val + ' div:first');
    $next.css('z-index', 2);
    $active.fadeOut(1500, function () {
        $active.css('z-index', 1).show().removeClass('active');
        $next.css('z-index', 3).addClass('active');
    });
}

$(window).load(function() {
    setInterval('cycleImages("main-photo-area")', 5000);
    setInterval('cycleImages("second-photo-area")', 5000);
})

我假设你的div都是相同的结构。

jquery交叉淡化两个div在同一个函数中

2 个答案: