しばらくの間、さまざまな無生物に頭をぶつけてきました。jQuery を使用して、プロモーション バナーのローテーションを作成しています。2 秒ごとに (短いのでテストのため、後でもっと長くする予定です)、画像とキャプションが変わります。
これは正常に機能し、それらの間を回転し、最後のものに到達すると最初に戻ります。しかし、1つをクリックして最初に戻ると(または最初のものを明示的にクリックすると)、次に回転しようとすると、これがスローされます:
Uncaught TypeError: Cannot read property '0' of undefined /ftwc/:178
changeImage
rotate
私の2つの機能について。理由がわかりません!
スクリプトは次のとおりです。
changeImage = function(num) {
$(".currentpromoimage").before('<div class="promoimage newpromoimage" style="background: url(\''+images[num][0]+'\') no-repeat; z-index: 1;"><div class="caption" style="color: #'+images[num][2]+'">'+images[num][1]+'</div></div>');
$(".currentpromoimage").fadeOut(700,function(){
$(".newpromoimage").addClass("currentpromoimage");
$(".newpromoimage").removeClass("newpromoimage");
$(this).remove();
});
$(".newpromoimage").fadeIn(700);
$("#promoselect").children().children().css('background', '#303030');
$("#ps_"+num).css('background', '#000000');
currentImage = num;
};
rotate = function() {
var imageLength = images.length-1;
if (currentImage == imageLength) {
changeImage("0");
} else {
var nextImage = currentImage+1;
/*alert("nextImage:"+nextImage);*/
changeImage(nextImage);
}
};
var selectors = "";
var preloads = '';
for(var i=0;i<images.length;i++) {
preloads += '<img src="'+images[i][0]+'" alt="preloaded" class="preload">';
selectors += "<li id=\"ps_"+i+"\"></li>";
}
$("body").prepend(preloads);
$("#grass").after('<div id="promo"><div id="promoselect"><ul></ul></div><div class="promoimage currentpromoimage" style="background: url(\''+images[0][0]+'\') no-repeat; z-index: 1;"><div class="caption" style="color: #'+images[0][2]+'">'+images[0][1]+'</div></div></div>');
var currentImage = 0;
$("#promoselect").children().append(selectors);
$("#ps_0").css('background', '#000000');
$("#promoselect")
.children()
.children()
.click(function() {
var selector = $(this).attr("id").split("_");
clearInterval(autoimage);
changeImage(selector[1]);
autoimage = setInterval(rotate,2000);
});
autoimage = setInterval(rotate,2000);
これはすべて jQuery ドキュメント準備完了関数内で呼び出され、images は json_encode を使用して PHP からエンコードされた配列です。現時点では面倒なことはわかっていますが、これらの関数が未定義のように見える理由がわかりません..
ありがとう!