【jQuery】バナーのランダム表示

jQueryでバナーをランダム表示したい場合、
headerに
<script type="text/javascript">
  jQuery(function($) {
    $.fn.extend({
      randomdisplay: function(num) {
        return this.each(function() {
          var chn = $(this).children().hide().length;
          for (var i = 0; i < num && i < chn; i++) {
            var r = parseInt(Math.random() * (chn - i)) + i;
            $(this).children().eq(r).show().prependTo($(this));
          }
        });
      }
    });
    $(function() {
      $("[randomdisplay]").each(function() {
        $(this).randomdisplay($(this).attr("randomdisplay"));
      });
    });
  });
</script>

htmlは
<ul class="randomdisplay" randomdisplay="3">
    <li>~</li>
</ul>

randomdisplayの数字を変更することで表示するバナーの数を変更できます。(この場合3枚表示)

このサイトのサイドバー(PC)やヘッダー(SP)で実際に使っているのでリロードしてランダム表示されることを試してみてください。

参考:https://web-omusubi.com/blog/omusubi75.html
【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)

関連記事

コメントを残す

*