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クックブック(オライリー)
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版
■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)
■上級・開発向け
jQueryクックブック(オライリー)