JQueryで動画・画像をランダムに再生させる方法

画像の場合

HTML

<img class="js-random-item" src="image_01.jpg">
HTML

JQuery

<script> $(window).on('load', function() { var items = [ 'image_01.jpg', 'image_02.jpg', 'image_03.jpg' ]; var randomItems = items[Math.floor(Math.random() * items.length)]; $('.js-random-item').attr('src', randomItems); });</script>
JavaScript

動画の場合

HTML

<video muted autoplay loop> <source class="js-random-item" src="movie_01.mp4"></video>
HTML

JQuery

<script> var items = [ 'movie_01.mp4', 'movie_02.mp4', 'movie_03.mp4' ]; var randomItems = items[Math.floor(Math.random() * items.length)]; $('.js-random-item').attr('src', randomItems);</script>
JavaScript

解説

まずは今回、使用したメゾットの説明です。

  • Math.floor() は引数に指定した値の小数点以下を切り捨てます。
  • Math.random() は0以上1未満の疑似ランダムな数値を返します。
  • attr() はHTML要素の属性を取得・変更・追加することできます。

なので今回はitems.lengthで配列の長さを取得し、その中からランダムで取得した値をsrc属性にattr()メゾットを使用して変更しました。
この方法を使用すれば他にも色々なことに使えそうですね。

read next