jQueryを利用して背景画像をランダムで切り替える

harada 281views 更新:2015年11月11日

jQueryファイルを読み込んだあとに以下のように記述すると、指定したブロックの背景画像をランダムに変更することが出来ます。
背景画像の配置位置やリピート設定などは別途CSSにて設定する必要があります。

<script>
  $(function() {
    var array = [
      '<?php bloginfo('template_directory'); ?>/common/img/bg_1.jpg',
      '<?php bloginfo('template_directory'); ?>/common/img/bg_2.jpg',
      '<?php bloginfo('template_directory'); ?>/common/img/bg_3.jpg'
    ];
    var l = array.length;
    var r = Math.floor(Math.random()*l);
    var bgimgurl = array[r];
    $(".randomImg").css('background-image',('url("'+bgimgurl+'")'));
  });
</script>

参考:[JS]jQuery で画像をランダムに出力する方法

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません