Javascriptを使って2枚の画像の切り替えを実現します.

6463 ワード

ボタンをクリックすることで、2枚の画像の切り替えができます.
  • まずaリンクと画像
  • を追加します.
    	<a id="link" href="#">      a><br>
    	<img id="img" src="1.jpg" alt="  1" width="400px" height="400px">
    
  • aリンクとタグ要素
  • を取得する.
    	<script type="text/javascript">
    		link = document.getElementById('link');
    		img = document.getElementById('img');
    	script>
    
  • 次は基本的な論理ステップを考慮しなければなりません.切替ボタンをクリックすると、画像が一回変わります.2回目の切替ボタンをクリックした時、元の画像に戻ります.
  • <script type="text/javascript">
    	//      
    	link = document.getElementById('link');
    	//      ,  flag=1,      ;  flag=2,      
    	var flag = 1;  
    	//        ,         
    	link.onclick = function() {
    		//        
    		img = document.getElementById('img');
    		if (flag) {
    			//  img src   
    			img.src = '2.jpg';
    			flag = 0;
    		}
    		else {
    			img.src = '1.jpg';
    			flag = 1;
    		}
    	}
    script>