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

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

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

webの話

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

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

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

まず下記を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の部分が5枚を表示する意味となります。

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

 

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

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

 

ではでは

 

 



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


更新日:2016-08-18

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

関連記事

SEO Meetupに参加してわかったSEOに大切な5つの事
あなたのアナリティクス 正確なデータとれていないかも
他社サイトのアクセス数などが分かるサービス
アナリティクスデータ無期限保存期間を5月25日まで
SEOはシンプルに考えるべき!絶対外せない重要な事3つ!
KPI・KSF・KGIをすっごく簡単に解説

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
CSSの背景画像でスライドショーを実装【jQuery】
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました!
雨の野外フェスで用意しておきたいもの



ブログ

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

webの話

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

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

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

まず下記を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の部分が5枚を表示する意味となります。

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

 

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

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

 

ではでは

 

 



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


更新日:2016-08-18
コメントを投稿する
投稿名
コメント
内容
画像認証 CAPTCHA Image

[ 認証画像を変える ]


関連記事

KPI・KSF・KGIをすっごく簡単に解説
あなたのアナリティクス 正確なデータとれていないかも
情報量が多いページから一瞬で知りたい情報を見つける方法
もしかしてWebの書き出し、まだpng…!?
SEOの時代は終わり?店舗型に向いていると思うweb集客
SEO Meetupに参加してわかったSEOに大切な5つの事

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
CSSの背景画像でスライドショーを実装【jQuery】
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました!
雨の野外フェスで用意しておきたいもの

ブログ