Javascriptについての質問です。

複数の画像(それぞれにリンクつき)をリロードごとに「順番に」切り替える方法を教えてください。
ランダムに切り替える方法は探せたのですが「順番に」切り替える方法がわかりません。
よろしくおねがいいたします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2006/03/29 12:49:11
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:aki73ix No.2

回答回数5224ベストアンサー獲得回数27

ポイント50pt

http://nifberry.727.net/test/hatena187.htm

実際にサンプルを書いてみましたが、こんな感じでよいと思います

<html>

<head>

<title>Cookie TEST</title>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">

<!--

var keep,xval;

//リンク先のURL(http:// を頭につけてもよい)

var lnk=new Array('//d.hatena.ne.jp/','//q.hatena.ne.jp/','//a.hatena.ne.jp/','//g.hatena.ne.jp/');

//リンクのイメージ(http:// を頭につけたフルパスでもOK)

var img=new 

Array('/naver/naver117/naver117a.gif','/naver/naver117/naver117b.gif','/naver/naver117/naver117c.gif','/naver/naver117/na

ver117d.gif');

//リンクのイメージの解説

var alt=new Array('LINK1','LINK2','LINK3','LINK4');

var maxlink=img.length;

function InitCookie(){

//Cookieの読み出し

  val=new Array();

  val= document.cookie.split("; ");

  valbase="hatena187="; // Cookieの変数名

  len=valbase.length;

  keep=0;

  for(i=0;val[i];i++){

    if (val[i].substr(0,len) == valbase){

      keep = 1 * val[i].substr(len,val[i].length);

      break;

    }

  }

//読み出し値の修正

  if(!keep)keep=0;

  xval=keep;

  keep=(keep+1)%maxlink;

//クッキーの書き込み処理

  exp=new Date();

//クッキーは1週間有効)

  exp.setTime(exp.getTime()+24*3600*1000*7);

  document.cookie = valbase + keep + "; expires=" + exp.toGMTString();

}

// -->

</script>

</head>

<body bgcolor="#ffffff">

<form>

<script language="JavaScript">

<!--

  InitCookie();

//ここで実際の描画処理

  document.write('<A HREF="'+ lnk[xval] +'"><IMG SRC="'+img[xval]+'" ALT="'+alt[xval]+'"></a>');

//-->

</script>

</body>

</html>

例えば、この場合は4つのリンクと画像がロードするたびに変わり4つ目までいったら最初に戻ります

keep = (keep +1 ) % maxlink;

最初に戻る処理はここでやっています

id:LxL

ありがとうございます。

ソースを書いていただいてとても助かりました!

2006/03/29 12:46:05

その他の回答1件)

id:tsux88 No.1

回答回数61ベストアンサー獲得回数4

ポイント20pt

Cookieを使えばできます。

Cookieに書き込む数字をリロードごとに一つずつ増やしていき、それを%演算子でも使ってやるとできます。

自力でCookieを扱うのは結構めんどうですので

http://www.shiojiri.ne.jp/%7eopenspc//js/index.html

のようなライブラリを使うと簡単ですよ。

id:LxL

ありがとうございます。

ですが上記のURLを拝見してもどうすればよいか分かりませんでした。もうすこしじっくり見てみますが・・・素人なのですみません。

あと、最後の画像の次はまた1枚目の画像に戻るようにしたいのです。

2006/03/29 01:23:38
id:aki73ix No.2

回答回数5224ベストアンサー獲得回数27ここでベストアンサー

ポイント50pt

http://nifberry.727.net/test/hatena187.htm

実際にサンプルを書いてみましたが、こんな感じでよいと思います

<html>

<head>

<title>Cookie TEST</title>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">

<!--

var keep,xval;

//リンク先のURL(http:// を頭につけてもよい)

var lnk=new Array('//d.hatena.ne.jp/','//q.hatena.ne.jp/','//a.hatena.ne.jp/','//g.hatena.ne.jp/');

//リンクのイメージ(http:// を頭につけたフルパスでもOK)

var img=new 

Array('/naver/naver117/naver117a.gif','/naver/naver117/naver117b.gif','/naver/naver117/naver117c.gif','/naver/naver117/na

ver117d.gif');

//リンクのイメージの解説

var alt=new Array('LINK1','LINK2','LINK3','LINK4');

var maxlink=img.length;

function InitCookie(){

//Cookieの読み出し

  val=new Array();

  val= document.cookie.split("; ");

  valbase="hatena187="; // Cookieの変数名

  len=valbase.length;

  keep=0;

  for(i=0;val[i];i++){

    if (val[i].substr(0,len) == valbase){

      keep = 1 * val[i].substr(len,val[i].length);

      break;

    }

  }

//読み出し値の修正

  if(!keep)keep=0;

  xval=keep;

  keep=(keep+1)%maxlink;

//クッキーの書き込み処理

  exp=new Date();

//クッキーは1週間有効)

  exp.setTime(exp.getTime()+24*3600*1000*7);

  document.cookie = valbase + keep + "; expires=" + exp.toGMTString();

}

// -->

</script>

</head>

<body bgcolor="#ffffff">

<form>

<script language="JavaScript">

<!--

  InitCookie();

//ここで実際の描画処理

  document.write('<A HREF="'+ lnk[xval] +'"><IMG SRC="'+img[xval]+'" ALT="'+alt[xval]+'"></a>');

//-->

</script>

</body>

</html>

例えば、この場合は4つのリンクと画像がロードするたびに変わり4つ目までいったら最初に戻ります

keep = (keep +1 ) % maxlink;

最初に戻る処理はここでやっています

id:LxL

ありがとうございます。

ソースを書いていただいてとても助かりました!

2006/03/29 12:46:05

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません