JavaScriptの絵スイッチ演習

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <メタ文字コード= "UTF-8"> 
        <タイトル> </ TITLE> 
        <スタイルタイプ= "テキスト/ cssの"> 
            #main { 
                幅：300ピクセル; 
                パディング：20ピクセル; 
                マージン：10pxの自動; 
                背景 - 色：黄色; 
                テキスト - 揃える：センター; 
            }
         </スタイル> 
    </ HEAD> 
    <BODY> 
        の<divのid = "メイン"> 
            <P ID = "情報"> </ P> 
            <IMG SRC = "IMG / 1.JPG" /> 
    <スクリプトタイプ= "テキスト/ JavaScriptを"> // 取得ボタンのname要素のVAR前=のdocument.getElementById（ "前" ）;
         VAR次=のdocument.getElementById（ "次へ" ）; // に配列を作成します画像パスを保存し、画像間のパス切り替えは、画像であるVaRの imgArr = [ "IMG / 1.JPG"、 "IMG / 2.JPG"、 "IMG / 3.JPG"、 "IMG / 4.JPG" ]; // 取得しますimg要素、アレイ素子付与IMGのVARの IMG = document.getElementsByTagName（ "IMG"）[0 ];
         // アラート（IMG）; // インデックス画像記憶パスを作成する（配列添字）VaRのインデックス= 0 ; // 注意書きのinnerHTMLプロパティを持つ<P>へのvar情報=ドキュメント。getElementByIdを（ "情報" ）;
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        機能         }楽しい（）{ 
            info.innerHTML = "合計" + imgArr.length + "張、今ある" +（インデックス+ 1）+ " 張" ; 
        } 
        ファン（）; 
        // 二つのボタンのイベントハンドラを作成します。 
        = pre.onclick 関数（）{
             // 警告（「前」）; 
            // インデックス減少にスイッチ 
            指数;
             // 超セクタを防止するために、周期に画像を解析する
            IF（指数< 0 ）{ 
                インデックス = -imgArr.length 1。; 
            } 
            img.src = imgArr [インデックス]; 
            ファン（）; // 関数の変化を呼び出す<P>コンテンツ

        next.onclick = 関数（）{
             // 警告（ "次"）; 
            // インデックス減少にスイッチ 
            インデックス++ ;
             IF（指数> -imgArr.length 1 ）{ 
                インデックス = 0 ; 
            } 
            IMG。 SRC = imgArr [インデックス]; 
            ファン（）; 
        }
        
     </ SCRIPT> 
</ HTML>
おすすめ
