0

Javascriptを使用して、ページが更新されたときに画像を切り替えるにはどうすればよいですか？

2つの画像があるとしましょう：

  • ImageA.jpg
  • ImageB.jpg

ページが更新されたときに、locationAとlocationBでこれらの画像を切り替えたいと思います。

シミュレーション：

- Page Refresh #1
<img id='locationA' src='ImageA.jpg'>
<img id='locationB ' src='ImageB.jpg'>


- Page Refresh #2
<img id='locationA' src='ImageB.jpg'>
<img id='locationB ' src='ImageA.jpg'>


- Page Refresh #3
<img id='locationA' src='ImageA.jpg'>
<img id='locationB ' src='ImageB.jpg'>

[更新＃1]

この実装を試しましたが、機能しません。誰かがこのコードの何が問題なのか教えてもらえますか？

<html>
  <head>
    <script type="text/javascript">
      var images = [];
      images[0] = "I_am_Super_Magnet%21.jpg";
      images[1] = "World_In_My_Hand%21.jpg";

      var index = sessionStorage.getItem('index');
      if(index) index = 0;

      if(index==0)
      {
        document.getElementById("locationA").src=images[index];
        document.getElementById("locationB").src=images[index+1];
        index = index + 1;
      }
      else if(index==1)
      {
        document.getElementById("locationA").src=images[index];
        document.getElementById("locationB").src=images[index-1];
        index = index - 1;
      }
     sessionStorage.setItem('index', index);
    </script>
  </head>
  <body>
    <img id='locationA' src=''>     
    <img id='locationB' src=''>
  </body>
</html>

[アップデート＃2]

テスト済み：

  • FF 16.0.1->動作中！
  • IE8->動作しません

コードは次のとおりです。

<html>
  <head>
    <script type="text/javascript">
    function switchImage()
    {
      var images = [];
      images[0] = "I_am_Super_Magnet%21.jpg";
      images[1] = "World_In_My_Hand%21.jpg";

      var index = sessionStorage.getItem('index');

      if(index == null) index = 0;//set index to zero if null

      index = parseInt(index);// parse index to integer, because sessionStorage.getItem() return string data type.

      if(index == 0)
      {
        document.getElementById("locationA").src=images[index];
        document.getElementById("locationB").src=images[index+1];
        index = index + 1;
      }
      else if(index == 1)
      {
        document.getElementById("locationA").src=images[index];
        document.getElementById("locationB").src=images[index-1];
        index = index - 1;
      }
      sessionStorage.setItem('index', index);
    }
    </script>
  </head>
  <body onload="switchImage()">
    <img id='locationA' src='src_locationA'>        
    <img id='locationB' src='src_locationB'>
  </body>
</html>

手がかりをくれたジャックに感謝します！サンプルを提供してくれたJonKartagoLamidaに感謝します！

ありがとう。

4

3 に答える 3

0

Cookieにフラグ変数を設定します（ Cookieの設定についてはJavascript Cookie SOの質問を確認してください）。

ページが読み込まれるたびに（onload関数で）フラグの値を確認します。

  1. 値が0の場合に言います。LocationAにImageAを表示します。次に、フラグ値を1に反転します。
  2. それ以外の場合、値は1です。LocationAにImageBを表示します。次に、フラグ値を0に反転します。

フラグ値はCookieに保存されます。

これがお役に立てば幸いです、Shoubhik

于 2013-01-15T07:08:48.873 に答える
0

localStorageを使用して、Jackによる例を挙げようとしています。最近のほとんどのブラウザはこれをサポートしています。私はまだこのコードを持っていませんが、多かれ少なかれこのようになるはずです。

 <html>
  <head>
    <script type="text/javascript">
     function init(){

var imageA = 'imageA.jpg';
var imageB = 'imageB.jpg';

// state maintaned using localStorage
var toggle = localStorage.getItem('toggle');

if(toggle) toggle = "A"; // if no state yet, initialize

if(toggle == "A"){
toggle = "B";
document.getElementById('locationA').src=imageA;
document.getElementById('locationB').src=imageB;
}else{
toggle = "A";
document.getElementById('locationA').src=imageB;
document.getElementById('locationB').src=imageA;
}
// put state back to local storage
localStorage.setItem('toggle', toggle);
}
    </script>
  </head>
  <body onload="init()">
    <img id='locationA' src=''>     
    <img id='locationB' src=''>
  </body>
</html>
于 2013-01-15T07:11:53.347 に答える
0

Damien_The_Unbelieverコメントに基づいて私は自分の質問のためにこの回答投稿を作成します。

これは私が使用する最終的なソリューションです。

[アップデート＃3]

テスト済み：

  • FF 16.0.1->動作中！
  • IE 8->動作中！
  • Chrome 24->動作中！（注：このブラウザーは、Cookieを読み取れるようにするために、少し余分な労力が必要です。このリンクを参照してください）

基本的に、コードはアップデート＃2と同じですが、異なるのは、の代わりにcookieを使用することですsessionStorage。完全なコードは次のとおりです。

<html>
  <head>
    <script type="text/javascript">
    function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function eraseCookie(name) {
        createCookie(name,"",-1);
    }

    function switchImage()
    {
      var images = [];
      images[0] = "I_am_Super_Magnet%21.jpg";
      images[1] = "World_In_My_Hand%21.jpg";

      var index = readCookie('index'); //sessionStorage.getItem('index');

      if(index == null) index = 0;//set index to zero if null

      index = parseInt(index);// parse index to integer, because sessionStorage.getItem() return string data type.

      if(index == 0)
      {
        document.getElementById("locationA").src=images[index];
        document.getElementById("locationB").src=images[index+1];
        index = index + 1;
      }
      else if(index == 1)
      {
        document.getElementById("locationA").src=images[index];
        document.getElementById("locationB").src=images[index-1];
        index = index - 1;
      }
      createCookie('index', index); //sessionStorage.setItem('index', index);
    }
    </script>
  </head>
  <body onload="switchImage()">
    <img id='locationA' src='src_locationA'>        
    <img id='locationB' src='src_locationB'>
  </body>
</html>
于 2013-01-16T02:38:52.567 に答える