人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: LxL
●カテゴリ:ウェブ制作
✍キーワード:JavaScript ランダム リロード リンク 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● tsux88
●20ポイント

Cookieを使えばできます。

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

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

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

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

◎質問者からの返答

ありがとうございます。

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

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


2 ● aki73ix
●50ポイント ベストアンサー

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;

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

◎質問者からの返答

ありがとうございます。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ