0

私は一緒に「石畳」にした以下のコードを持っています。基本的に、いくつかのJSONデータ（サンプルも以下にあります）を取得し、該当する画像をプリロードし、返されたデータを使用するようにスライドショーを変更する必要があります。

動作していますが、画像とテキストが一致していません。これは何かと関係があると思いますが、currImg++%preloadArrayName.lengthこれが何を意味するのかわかりません...

どんな助けでもありがたいことに感謝します！

function updateHomepageSlideshow(data)
{
var preloadArr = new Array();
var preloadArrName = new Array();
var preloadArrOffer = new Array();
var i;

/* preload images */
for(i=0; i < data.length; i++){
    preloadArr[i] = new Image();
    preloadArr[i].src = 'http://media.domain.com/restaurants/large/' + data[i]   ['restaurantCode'] + '.jpg';
    preloadArrName[i] = data[i]['restaurantName'];
    preloadArrOffer[i] = data[i]['offerName'];
}

var currImg = 1;
var intID = setInterval(changeImg(data), 6000);

/* image rotator */
function changeImg(data){
    $('#amazingOffersAt').hide();
    $('#homepageRestaurantNameId').html(preloadArrName[currImg++%preloadArrName.length]);
    $('#homepageRotatingImage').css('background-image','url(' + preloadArr[currImg++%preloadArr.length].src +')');
    $('#homepageRestaurantOfferId').html(preloadArrOffer[currImg++%preloadArrOffer.length]);
}
}

JSON

[{
"restaurantName": "Caf\u00e9 des Amis",
"restaurantCode": "cafe-des-amis",
"address": "11 - 14 Hanover Place",
"town": "Covent Garden",
"county": "London",
"postcode": "WC2E 9JP",
"lat": "51.5133900",
"lng": "-0.1231300",
"largeImage": "1",
"offerTypeId": "9",
"offerName": "3 course set menu for \u00a315"
}, {
"restaurantName": "Palm Court Brasserie",
"restaurantCode": "palm-court-brasserie",
"address": "39 King Street",
"town": "Covent Garden",
"county": "London",
"postcode": "WC2E 8JS",
"lat": "51.5119700",
"lng": "-0.1243000",
"largeImage": "1",
"offerTypeId": "12",
"offerName": "3 courses and a kir royale \u00a322.50"
}, {
"restaurantName": "Clos Maggiore",
"restaurantCode": "clos-maggiore",
"address": "33 King Street",
"town": "Covent Garden",
"county": "London",
"postcode": "WC2E 8JD",
"lat": "51.5116900",
"lng": "-0.1247700",
"largeImage": "1",
"offerTypeId": "12",
"offerName": "2 courses: \u00a315.50"
}, {
"restaurantName": "Navajo Joe",
"restaurantCode": "navajo-joe",
"address": "34 King Street",
"town": "Covent Garden",
"county": "London",
"postcode": "WC2E 8JD",
"lat": "51.5116900",
"lng": "-0.1247700",
"largeImage": "1",
"offerTypeId": "1",
"offerName": "50% Off Your Food "
}, {
"restaurantName": "Le Deuxieme",
"restaurantCode": "le-deuxieme",
"address": "65a Long Acre, Covent Garden",
"town": "London",
"county": "West End London",
"postcode": "WC2E 9JD",
"lat": "51.5139100",
"lng": "-0.1227800",
"largeImage": "1",
"offerTypeId": "12",
"offerName": "Sunday offer: 3 courses &amp; half bottle of wine \u00a320"
}]
4

2 に答える 2

2

使用する必要があります

var currImg = 0; // let's start at first image
var intID = setInterval(changeImg, 6000); // you don't need the data and you were passing the result of the function, not the function
/* image rotator */
function changeImg(data){
    $('#amazingOffersAt').hide();
    var index = currImg++%preloadArrName.length;
    $('#homepageRestaurantNameId').html(preloadArrName[index]);
    $('#homepageRotatingImage').css('background-image','url(' + preloadArr[index].src +')');
    $('#homepageRestaurantOfferId').html(preloadArrOffer[index]);
}

あなたのコードは、各行でcurrImg++インクリメントと同じインデックスを使用していませんでしたcurrImg。

より正確には、currImg++%preloadArrayName.lengthis (currImg++)%preloadArrayName.length(優先順位を参照) : の値(つまり、配列内の有効なインデックス) とインクリメントcurrImgを確実に取得するためにのモジュロが必要です。[0, preloadArrayName.length[currImg

コードは、3 つの配列が同じサイズの場合にのみ機能することに注意してください。3 つの配列を使用する代わりに、1 つの配列のみを使用しますが、オブジェクト (json にあるものなど) を含みます。

于 2012-11-26T18:22:00.783 に答える
0

changeImg（）でインデックスをインクリメントするために使用しているメソッドについて確信がありますか？モジュラス演算を行うポイントは何ですか？多分私は何かが欠けています。

画像を単純にループしたい場合は、次のようにしてください。

var currImg = 0;

function changeImg(data){

if(currImg == preloadArrName.length - 1){
   currImg = 0; // reset index to the first element
}else{
   currImg++ // increment the index to the next element
}
$('#amazingOffersAt').hide();

$('#homepageRestaurantNameId').html(preloadArrName[index]);
$('#homepageRotatingImage').css('background-image','url(' + preloadArr[index].src +')');
$('#homepageRestaurantOfferId').html(preloadArrOffer[index]);

}

于 2012-11-26T19:47:48.667 に答える