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

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

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

webの話


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

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

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

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

 

<script type="text/javascript" src="http://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
[ 認証画像を変える ]

関連記事

CSSの背景画像でスライドショーを実装【jQuery】
もしかしてWebの書き出し、まだpng…!?
3分でwebサイトの各端末表示確認が出来るサービス「Sizzy」
情報量が多いページから一瞬で知りたい情報を見つける方法
サイト内のどのボタンを押したか計測する方法
アドワーズ代行詐欺?怪しい営業があったのでgoogleに聞いてみた!

人気記事

CSSの背景画像でスライドショーを実装【jQuery】
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!



ブログ

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

webの話




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

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

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

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

 

<script type="text/javascript" src="http://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

[ 認証画像を変える ]


関連記事

CSS Nite in OSAKA In-house SEO Meetup 参加予定
AJAXで簡単にドラッグ&ドロップで順番を変更する方法
アナリティクスを登録する際に絶対しておきたい3つのこと
アドワーズの仕様変更でキーワードプランナーが悲しいことに…
SEOはシンプルに考えるべき!絶対外せない重要な事3つ!
たった3分で実装出来るJqueryで簡単スマホ用メニュー実装!


人気記事

CSSの背景画像でスライドショーを実装【jQuery】
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!

ブログ