１分で出来る簡単にランダムバナーを設置する方法「jQuery」[webの話]

１分で出来る簡単にランダムバナーを設置する方法「jQuery」

webの話

どうもおむすび17号です。
バナーをランダムに表示させたいとの要望がありました。

ランダムの概要としては
２０枚の画像をストックしておいて常に５枚の画像を２０枚の画像の中から
ランダムで表示するというものです。

その方法を解説いたします。

まず下記をhead部分に入れてください

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<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="6">
    <li><a href=""><img src="xxx.jpg"></a></li>
    <li><a href=""><img src="xxx.jpg"></a></li>
    <li><a href=""><img src="xxx.jpg"></a></li>
    <li><a href=""><img src="xxx.jpg"></a></li>
    <li><a href=""><img src="xxx.jpg"></a></li>
    <li><a href=""><img src="xxx.jpg"></a></li>
    <li><a href=""><img src="xxx.jpg"></a></li>
</ul>

randomdisplay=5の部分が５枚を表示する意味となります。

この部分の数字を変える事でランダム表示数を操作する事が可能です。

すごく簡単に実装できますので

是非つかってみてください。

ではでは

大卒後めでたくIT大手起業に就職するも業績不振により半年で解雇。 24歳でIT会社を起業するも失敗。その後おとなしく制作会社で5年働き18号を巻き込んでおむすびを始めました。利用する人が少しでも幸せになるwebサービスを生み出していきます。

更新日：2016-08-18

コメントを投稿する

投稿名
コメント内容
画像認証	[ 認証画像を変える ]

スマホ投稿にも使えるWYSIWYGエディッタsummernote

PHPでTwitterをAPIでツイートする（2016年8月版）

他社サイトのアクセス数などが分かるサービス

アナリティクスを登録する際に絶対しておきたい３つのこと

CSSの背景画像でスライドショーを実装【jQuery】

自分で出来る！MEO(ローカルSEO)でやっておくべきこと6つ