Question

我正在尝试制作一个简单的图像旋转器，它将通过php数组中的许多设置图像进行旋转。数组输出正确，样式工作，甚至淡出活动元素的JQuery。它只是找不到下一个元素并使用console.log（），我知道它正在计算正确的元素。我甚至试图在.eq（）中添加一个数字（如3）来查看它是否会选择该元素，但它不会。这是我的代码：

PHP代码：

$randomNumber = rand(0);

$performanceImages = array("09_15_11-Lorton_opening_088.jpg", 
                            "09_15_11-Lorton_opening_120.jpg",
                            "09_15_11-Lorton_opening_123.jpg",
                            "09_15_11-Lorton_opening_125.jpg",
                            "09_15_11-Lorton_opening_126.jpg",
                            "09_15_11-Lorton_opening_128-150x150.jpg",
                            "09_15_11-Lorton_opening_131.jpg",
                            "09_15_11-Lorton_opening_132.jpg",
                            "09_15_11-Lorton_opening_135-199x300.jpg",
                            "09_15_11-Lorton_opening_137-150x150.jpg",
                            "09_15_11-Lorton_opening_144.jpg",
                            "09_15_11-Lorton_opening_161.jpg");

$randomNumber = rand(0, (sizeof($performanceImages) - 1) );

for ($cnt = 0; $cnt < sizeof($performanceImages); $cnt++) {
    if ($cnt == $randomNumber) {
        echo '<div id="rotator-image" class="active" style="display:block;"><img src="'.get_bloginfo('template_directory').'/images/rotation-images/'.$performanceImages[$cnt].'" /></div>';
    } else {
        echo '<div id="rotator-image" style="display:none;"><img src="'.get_bloginfo('template_directory').'/images/rotation-images/'.$performanceImages[$cnt].'" /></div>';
    }
}

CSS：

#sidebar-image-rotator {
width: 180px;
height: 263px;
position: relative; 
}

#rotator-image {
position: absolute;
top: 0;
left: 0;    
}

JQuery：

function sidebarImageRotator(){

var count = $("#sidebar-image-rotator").children("#rotator-image").length;
//console.log(count);
var active = $('#rotator-image.active').index();
//console.log(active);

if ((active + 1) < count) {
    var next = active + 1;
} else {
    var next = 0;
}
//console.log(next);

//change div classes
$("#rotator-image.active").fadeOut('slow', function () {
    $("#rotator-image.active").removeClass("active").css("display","none");
    $('#sidebar-image-rotator').find('#rotator-image').eq(next).addClass('active').fadeIn('slow', function () {
        $('#rotator-image.active').css('display', 'block');
    })
}); 
}  

function startTimer() {
//timer for the box
window.timer = window.setInterval(function() {
    $("#sidebar-image-rotator").timer();
}, 7000);

jQuery.fn.timer = function() {
    sidebarImageRotator();
}
}

正在调用startTimer（）并加载页面。

Answer 1

HTML id必须是unqiue。 jQuery只会找到第一个id，而是改为使用类。

如下所示

示例PHP循环：

for ($cnt = 0; $cnt < sizeof($performanceImages); $cnt++) {
    if ($cnt == $randomNumber) {
        echo '<div class="rotator-image active" style="display:block;"><img src="'.get_bloginfo('template_directory').'/images/rotation-images/'.$performanceImages[$cnt].'" /></div>';
    } else {
        echo '<div class="rotator-image" style="display:none;"><img src="'.get_bloginfo('template_directory').'/images/rotation-images/'.$performanceImages[$cnt].'" /></div>';
    }
}

CSS示例

.rotator-image {
position: absolute;
top: 0;
left: 0;    
}

示例jQuery

var count = $("#sidebar-image-rotator").children(".rotator-image").length;
//console.log(count);
var active = $('.rotator-image.active').index();
//console.log(active);

if ((active + 1) < count) {
    var next = active + 1;
} else {
    var next = 0;
}
//console.log(next);

//change div classes
$(".rotator-image.active").fadeOut('slow', function () {
    $(".rotator-image.active").removeClass("active").css("display","none");
    $('#sidebar-image-rotator').find('.rotator-image').eq(next).addClass('active').fadeIn('slow', function () {
        $('.rotator-image.active').css('display', 'block');
    })
}); 
}

Answer 2

id属性应该是唯一的;您的选择器#rotator-image将返回带有 id = rotator-image 的第一个元素，并忽略其余元素。您可以明确地选择ID：

$('#sidebar-image-rotator').find('[id=rotator-image]').eq(next)

更好的想法是在您的元素上使用其他属性，例如rel或data-type或其他任何属性。

<div rel='rotator-image' ... ></div>

Answer 3

认为这是问题

if ((active + 1) < count) {
        **var next = active + 1;**
    } else {
        var next = 0;
    }

您需要在函数外部声明 var next 。否则，每次调用该函数时，都会被新实例替换

JQuery .eq选择器不选择元素

3 个答案: