-1

我正在尝试制作一个简单的图像旋转器，它将通过 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;    
}

查询：

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()。

4

3 回答 3

2

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');
    })
}); 
}
于 2012-09-19T22:20:43.303 回答
2

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

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

一个更好的主意是在你的元素上使用一些其他属性，比如relordata-type或其他。

<div rel='rotator-image' ... ></div>
于 2012-09-19T22:26:47.903 回答
-1

认为这是问题

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

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

于 2012-09-19T22:25:14.313 回答