Menu

CODE

ランダム画像

2019/02/09 更新日:2020/05/04
デモページへ
仕様書

印象的にファーストビューを作りたいという希望を叶えるページになります。

画像をランダムで表示していき、またアニメーションも左から右へ流れていくようなビューになります。

画像は読み込み毎にランダムで選択されていき、どんな比率の画像でも真ん中を捉えるように実装されています。

表示の部分

先ずはロードされたら表示の部分をSettimeoutでずらしていきます。 表示されたらその中で関数を呼び今度はその画像を消していきます。これで表示と非表示の画面はできました。

function loop() {
    setTimeout('layer1_Start()', 0);
    setTimeout('layer2_Start()', 4000);
    setTimeout('layer3_Start()', 8000);
    setTimeout('layer4_Start()', 12000);
    setTimeout('layer5_Start()', 16000);
    setTimeout('layer6_Start()', 20000);
    setTimeout('layer7_Start()', 24000);
    setTimeout('layer8_Start()', 28000);
    setTimeout('layer9_Start()', 32000);
    setTimeout('layer10_Start()', 36000);
}
function layer1_Start() {
    $('.c-layer1').addClass('is-active');
    setTimeout(layer1_Stop, 5000);
}
function layer2_Start() {
    $('.c-layer2').addClass('is-active');
    setTimeout(layer2_Stop, 5000);
}
function layer3_Start() {
    $('.c-layer3').addClass('is-active');
    setTimeout(layer3_Stop, 5000);
}
function layer4_Start() {
    $('.c-layer4').addClass('is-active');
    setTimeout(layer4_Stop, 5000);
}
function layer5_Start() {
    $('.c-layer5').addClass('is-active');
    setTimeout(layer5_Stop, 5000);
}
function layer6_Start() {
    $('.c-layer6').addClass('is-active');
    setTimeout(layer6_Stop, 5000);
}
function layer7_Start() {
    $('.c-layer7').addClass('is-active');
    setTimeout(layer7_Stop, 5000);
}
function layer8_Start() {
    $('.c-layer8').addClass('is-active');
    setTimeout(layer8_Stop, 5000);
}
function layer9_Start() {
    $('.c-layer9').addClass('is-active');
    setTimeout(layer9_Stop, 5000);
}
function layer10_Start() {
    $('.c-layer10').addClass('is-active');
    setTimeout(layer10_Stop, 5000);
}
function layer1_Stop() {
    $('.c-layer1').removeClass('is-active')
}
function layer2_Stop() {
    $('.c-layer2').removeClass('is-active')
}
function layer3_Stop() {
    $('.c-layer3').removeClass('is-active')
}
function layer4_Stop() {
    $('.c-layer4').removeClass('is-active')
}
function layer5_Stop() {
    $('.c-layer5').removeClass('is-active')
}
function layer6_Stop() {
    $('.c-layer6').removeClass('is-active')
}
function layer7_Stop() {
    $('.c-layer7').removeClass('is-active')
}
function layer8_Stop() {
    $('.c-layer8').removeClass('is-active')
}
function layer9_Stop() {
    $('.c-layer9').removeClass('is-active')
}
function layer10_Stop() {
    $('.c-layer10').removeClass('is-active');
    loop();
}

次にランダム表示をしていきます

for while 配列の中に入れたimg1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]を回します。j = Math.floor(Math.random() * (i1 + 1));でランダムで該当した数字を取り除いていき変数に入れます。

for (i = 1; i < 11; i++) {
    var img1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
        img2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
        ranImg1 = [],
        ranImg2 = [],
        i1 = img1.length,
        i2 = img2.length,
        j = 0;
    while (i1--) {
        j = Math.floor(Math.random() * (i1 + 1));
        ranImg1.push(img1[j]);
        img1.splice(j, 1);

次にランダム表示をしていきます

最後はappendでDOMを表示していきます。

  <div class="c-slide6__item c-layer'+ i + '">\
        <table>\
            <tr>\
                <td>\
                    <p class="type2"><img src="/code/function/project-1/assets/img/'+ ranImg2[0] + '.png" /></p>\
                </td>\
                <td>\
                    <p class="type1"><img src="/code/function/project-1/assets/img/'+ ranImg1[0] + '.png" /></p>\
                </td>\
                <td>\
                    <p class="type2"><img src="/code/function/project-1/assets/img/'+ ranImg2[1] + '.png" /></p>\
                </td>\
                <td class="pc-only"></td>\
                <td class="pc-only"></td>\
                <td class="pc-only"></td>\
                <td>\
                    <p class="type1"><img src="/code/function/project-1/assets/img/'+ ranImg1[1] + '.png" /></p>\
                </td>\
                <td colspan="2" rowspan="2">\
                    <p class="type2"><img src="/code/function/project-1/assets/img/'+ ranImg2[2] + '.png" /></p>\
                </td>\
            </tr>\


 $(".c-slide6").append(data);
Back to List