-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;    
}

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（）は、ページがロードされた状態で呼び出されています。

4

3 に答える 3

2

HTMLIDは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属性は一意である必要があります。セレクターはid=rotator-image#rotator-imageの最初の要素を返し、残りは無視します。代わりに、IDを明示的に選択できます。

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

より良いアイデアは、relまたはなどの要素に他の属性を使用することdata-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を宣言する必要があります。そうしないと、関数が呼び出されるたびに、新しいインスタンスに置き換えられます。

于 2012-09-19T22:25:14.313 に答える