リロードさせるたびに画像を変えるには？

締切済

質問者：baka_nande
質問日時：2010/09/08 01:34
回答数：4件

リロードさせるたびに画像を変えるには？

html+cssでHPを作ってますが、一番上の目立つところに横長の写真を置いてます。
これをアクセスする度に変わるようにできる方法を知ってる人はいますか？

とりあえず３枚の画像でやってみたいんですが、ランダム表示でもかまいません。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： yyr446
回答日時：2010/09/08 13:46

補足、「古いブラウザーはcookieを使う」の追加分

//---------------------------------------------------

　if ('undefined' !== typeof localStorage){
　 if(localStorage.gazou_number)
　　 pre_gazou_number=localStorage.gazou_number;
　}else{
　 if(Getcookie('gazou_number'))
　　 pre_gazou_number=getCookie('gazou_number');
　}

//---------------------------------------------------

　if ('undefined' !== typeof localStorage)
　 localStorage.gazou_number=gazou_number;
　else setCookie('gazou_number',gazou_number);

//---------------------------------------------------

function Getcookie(key){
　var value = document.cookie.match(RegExp(name+'\\s*=\\s*(.*?)(?:[\\s;,]|$)'));
　return value?value[1]:'';
}
function Setcookie(key,val){
　document.cookie = key+"="+val;
　document.cookie = ";expires=" + Date(2099,12,31).toGMTString;
}

- 0
- 件

通報する

No.3

回答者： yyr446
回答日時：2010/09/08 12:21

毎回必ず異なる画像になるサンプル。

（javascriptが無効な場合も考慮：その場合は切り替わらないが）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<script type="text/javascript">

if('undefined' !== typeof document.addEventListener)
　window.addEventListener('load',function(){func();},false);
else if ('undefined' !== typeof document.attachEvent)
　window.attachEvent('onload',function(){func();});

function func(){
　var gazoulist=['gazou1.jpg','gazou2.jpg','gazou3.jpg'];
　var gazou_number = 0;
　var pre_gazou_number = 0;
　if ('undefined' !== typeof localStorage){
　 if(localStorage.gazou_number)
　　 pre_gazou_number=localStorage.gazou_number;
　}
　while(gazou_number == pre_gazou_number)
　 gazou_number = Math.floor(Math.random()*gazoulist.length);
　 document.getElementById("gazo").src=gazoulist[gazou_number];
　if ('undefined' !== typeof localStorage)
　 localStorage.gazou_number=gazou_number;
}

</script>
</head>
<body>
<p>TOP画像<br>
<img id="gazo" alt="Top画像" src="gazou1.jpg">
</p>
</body>
</html>

localStorageが無いブラウザーはCookieで同様の事をする！
見やすくするため全角空白を使用してます。半角空白にしてね！

- 0
- 件

通報する

No.2

回答者： imaimasan
回答日時：2010/09/08 04:03

<script type="text/javascript">

(function(){
var src=[
　　'010101.jpg',
　　'aaaa.jpg',
　　'test.jpg'
];
var i=Math.floor(Math.random()*src.length);
document.write('<img src="'+src[i]+'" />');
})();
</script>

ランダム表示のjavascriptです。
src=[]の中に、画像のパスを''で囲ってカンマ(,)区切りで入れてってください。
ただ、ランダムなので当然連続して同じものが表示されてしまいますが。