0

このトピックが何度も見られていることは知っていますが、ホームページで画像をランダムに選択し、その画像のサブタイトルを変更したいと考えています。私のサイトの URL はhttp://www.connorloughlin.comです。

ページの下部に小さなサブタイトルがあります。関連する背景に合わせて変更するとよいでしょう。複雑すぎる場合は気にしませんが、見栄えがするだろうと思いました! できれば、それぞれに独自のサブタイトルが付いた 5 つの画像が必要です。

何か明確にしてほしいことがあればお知らせください。事前に感謝します。

4

3 に答える 3

1

プレーンな JavaScript での最も簡単な方法:

var images = [
    {
        subtitle : 'Subtitle text for image one...',
        src : 'http://placekitten.com/1000/1000'
    },
    {
        subtitle : 'Subtitle text for image two...',
        src : 'http://lorempixel.com/1000/1000/people/'
    },
    {
        subtitle : 'Subtitle text for image three...',
        src : 'http://lorempixel.com/1000/1000/nightlife/'
    },
    {
        subtitle : 'Subtitle text for image four...',
        src : 'http://lorempixel.com/1000/1000/nature/'
    }
];

function setBackground (images) {
    // generates a random integer between 0 and the length of the supplied array:
    var n = Math.floor(Math.random() * images.length),
        // works out whether to use the 'textContent' or 'innerText' property:
        textProperty = 'textContent' in document ? 'textContent' : 'innerText';

    // sets the background-image of the 'body' element:
    document.body.style.backgroundImage = 'url(' + images[n].src + ')';

    // sets the text of the relevant subtitle element:
    document.getElementById('subtitleElementID')[textProperty] = images[n].subtitle;
}

setBackground(images);

JS フィドルのデモ。

または、 nミリ秒ごとに背景を変更したい場合は、次を追加できます。

window.setInterval(function(){
    setBackground(images)
}, 5000);

JS フィドルのデモ。

明らかに、これは 5000 ミリ秒ごとに画像 (および字幕) を変更します。

于 2013-09-23T00:40:30.377 に答える
1

以下は JQuery です。各画像に bg1 または bg2 という名前を付けるだけです。

//  On Page Load
  backgroundSelect();

function backgroundSelect(){
  var sub1 = "this is my subtitle"

  var numImgs = 5;  // The Number of images you have total.
  var select  = Math.round(Math.random() * numImgs) + 1;  // add one so not zero based.

  $('body').css('background-image', 'bg' + select);
  $('subtitle_element').replaceWith(sub1);
}

これは、コードを記述する最もクリーンでセマンティックな方法ではありません。しかし、うまくいけば、それがあなたを正しい方向へと導いてくれるでしょう。

于 2013-09-23T00:34:25.050 に答える