１分で出来る簡単にランダムバナーを設置する方法「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

コメントを投稿する

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

KPI・KSF・KGIをすっごく簡単に解説

作業時間3分！WEBクリップアイコンを実装だ！

もしかしてWebの書き出し、まだpng…!?

アドワーズの仕様変更でキーワードプランナーが悲しいことに…

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

SEO Meetupに参加してわかったSEOに大切な５つの事